@payfit/unity-themes 2.0.0 → 2.2.0

package/dist/css/unity.css

@@ -49,10 +49,12 @@
   --animate-slide-right-fade-out: 0.3s ease-out 1 slide-right-fade-out;
   --animate-slide-up-fade-in: 0.3s ease-in 1 slide-up-fade-in;
   --animate-slide-down-fade-out: 0.3s ease-out 1 slide-down-fade-out;
+  --animate-zoom-in: 0.3s ease-in 1 zoom-in;
+  --animate-zoom-out: 0.3s ease-out 1 zoom-out;
   --color-grayscale-l1: oklch(99.059% 0.0017 247.84);
   --color-grayscale-l2: oklch(98.22% 0.00412 271.37);
-  --color-grayscale-l3: oklch(96.001% 0.00625 255.48);
-  --color-grayscale-l4: oklch(94.449% 0.00799 253.85);
+  --color-grayscale-l3: oklch(97.323% 0.00413 271.37);
+  --color-grayscale-l4: oklch(95.128% 0.00745 260.73);
   --color-grayscale-l5: oklch(91.982% 0.00977 252.82);
   --color-grayscale-l6: oklch(86.339% 0.01521 251.17);
   --color-grayscale-l7: oklch(76.254% 0.02353 254.43);
@@ -184,7 +186,11 @@
   --color-orange-l10: oklch(42.172% 0.12494 33.8);
   --color-orange-l11: oklch(28.891% 0.10112 35.093);
   --color-orange-l12: oklch(16.65% 0.04887 43.496);
-  --color-utility-backdrop: oklch(24.113% 0.00969 248.23 / 0.64);
+  --color-utility-backdrop: oklch(16.172% 0.03703 253.15 / 0.6);
+  --color-utility-shadow-raising: oklch(24.357% 0.06952 254.17 / 0.04);
+  --color-utility-shadow-floating: oklch(24.357% 0.06952 254.17 / 0.08);
+  --color-utility-shadow-flying: oklch(24.357% 0.06952 254.17 / 0.1);
+  --color-utility-shadow-soaring: oklch(24.357% 0.06952 254.17 / 0.12);
   --grid-layout-columns--default: 6;
   --grid-layout-columns--md: 12;
   --grid-layout-columns--lg: 12;
@@ -201,13 +207,9 @@
   --radius-circle: 50%;
   --radius-pill: 9999px;
   --shadow-canvas: none;
-  --shadow-raising: 0px 1px 2px 0px #04204010;
-  --shadow-floating: 0px 6px 20px -4px #04204014;
-  --shadow-flying: 0px 8px 20px 4px #0420401a;
-  --shadow-soaring: 0px 24px 32px -8px #0420401f;
   --container-app-menu: 296px; /** Width of the main menu in global App layout */
   --container-lg: 984px; /** Maximum width for layout containers at large resolutions */
-  --container-xl: 1144px; /** Maximum width for layout containers at extra-large resolutions */
+  --container-xl: 1360px; /** Maximum width for layout containers at extra-large resolutions */
   --container-content: 523px; /** Maximum width for content containers */
   --container-section: 703px; /** Maximum width for section containers */
   --container-page: 1063px; /** Maximum width for page containers */
@@ -241,16 +243,16 @@
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
-  --text-50: 11px;
+  --text-50: 12px;
   --text-75: 14px;
   --text-100: 16px;
   --text-200: 18px;
   --text-300: 20px;
-  --text-400: 23px;
-  --text-500: 26px;
-  --text-600: 29px;
-  --text-800: 32px;
-  --text-1000: 36px;
+  --text-400: 22px;
+  --text-500: 24px;
+  --text-600: 28px;
+  --text-800: 30px;
+  --text-1000: 32px;
   --text-1200: 41px;
   --text-1400: 52px;
   --text-1600: 66px;
@@ -281,8 +283,21 @@
   --color-surface-neutral-selected: var(--uy-color-grayscale-l3);
   --color-surface-neutral-disabled: var(--uy-color-grayscale-l3);
   --color-surface-neutral-low: var(--uy-color-grayscale-l3);
-  --color-surface-neutral-low-hover: var(--uy-color-grayscale-l2);
-  --color-surface-neutral-lowest: var(--uy-color-grayscale-l2);
+  --color-surface-neutral-low-enabled: var(--uy-color-grayscale-l3);
+  --color-surface-neutral-low-hover: var(--uy-color-grayscale-l4);
+  --color-surface-neutral-low-pressed: var(--uy-color-grayscale-l5);
+  --color-surface-neutral-low-focus: var(--uy-color-grayscale-l4);
+  --color-surface-neutral-low-active: var(--uy-color-grayscale-l5);
+  --color-surface-neutral-low-disabled: var(--uy-color-grayscale-l3);
+  --color-surface-neutral-low-selected: var(--uy-color-grayscale-l4);
+  --color-surface-neutral-lowest: var(--uy-color-grayscale-l4);
+  --color-surface-neutral-lowest-enabled: var(--uy-color-grayscale-l4);
+  --color-surface-neutral-lowest-hover: var(--uy-color-grayscale-l5);
+  --color-surface-neutral-lowest-pressed: var(--uy-color-grayscale-l6);
+  --color-surface-neutral-lowest-focus: var(--uy-color-grayscale-l5);
+  --color-surface-neutral-lowest-active: var(--uy-color-grayscale-l6);
+  --color-surface-neutral-lowest-disabled: var(--uy-color-grayscale-l4);
+  --color-surface-neutral-lowest-selected: var(--uy-color-grayscale-l5);
   --color-surface-danger: var(--uy-color-red-l7);
   --color-surface-danger-enabled: var(--uy-color-red-l7);
   --color-surface-danger-hover: var(--uy-color-red-l8);
@@ -340,22 +355,47 @@
   --color-surface-form-pressed: var(--uy-color-grayscale-l0);
   --color-surface-form-focus: var(--uy-color-grayscale-l0);
   --color-surface-form-active: var(--uy-color-blue-l5);
-  --color-surface-form-selected: var(--uy-color-blue-l2);
+  --color-surface-form-selected: var(--uy-color-blue-l1);
   --color-surface-form-disabled: var(--uy-color-grayscale-l3);
   --color-surface-form-read-only: var(--uy-color-grayscale-l8);
   --color-surface-form-error: var(--uy-color-red-l2);
+  --color-surface-form-high-enabled: var(--uy-color-grayscale-l3);
+  --color-surface-form-high-hover: var(--uy-color-grayscale-l4);
+  --color-surface-form-high-pressed: var(--uy-color-grayscale-l5);
+  --color-surface-form-high-focus: var(--uy-color-grayscale-l3);
+  --color-surface-form-high-active: var(--uy-color-grayscale-l0);
+  --color-surface-form-high-selected: var(--uy-color-blue-l2);
+  --color-surface-form-high-disabled: var(--uy-color-grayscale-l2);
+  --color-surface-form-high-read-only: var(--uy-color-grayscale-l2);
+  --color-surface-form-high-error: var(--uy-color-red-l2);
   --color-surface-inverted: var(--uy-color-grayscale-l12);
   --color-surface-inverted-enabled: var(--uy-color-grayscale-l12);
   --color-surface-inverted-hover: var(--uy-color-grayscale-l10);
   --color-surface-inverted-pressed: var(--uy-color-grayscale-l11);
   --color-surface-inverted-focus: var(--uy-color-grayscale-l12);
   --color-surface-inverted-active: var(--uy-color-grayscale-l11);
+  --color-surface-decorative-teal: var(--uy-color-teal-l6);
+  --color-surface-decorative-teal-high: var(--uy-color-teal-l9);
+  --color-surface-decorative-teal-low: var(--uy-color-teal-l3);
+  --color-surface-decorative-teal-lowest: var(--uy-color-teal-l2);
+  --color-surface-decorative-purple-high: var(--uy-color-purple-l9);
+  --color-surface-decorative-purple: var(--uy-color-purple-l6);
+  --color-surface-decorative-purple-low: var(--uy-color-purple-l3);
+  --color-surface-decorative-purple-lowest: var(--uy-color-purple-l2);
+  --color-surface-decorative-plum: var(--uy-color-plum-l6);
+  --color-surface-decorative-plum-high: var(--uy-color-plum-l9);
+  --color-surface-decorative-plum-low: var(--uy-color-plum-l3);
+  --color-surface-decorative-plum-lowest: var(--uy-color-plum-l2);
+  --color-surface-decorative-orange: var(--uy-color-orange-l6);
+  --color-surface-decorative-orange-high: var(--uy-color-orange-l9);
+  --color-surface-decorative-orange-low: var(--uy-color-orange-l3);
+  --color-surface-decorative-orange-lowest: var(--uy-color-orange-l2);
   --color-content-primary: var(--uy-color-blue-l6);
   --color-content-primary-enabled: var(--uy-color-blue-l7);
   --color-content-primary-hover: var(--uy-color-blue-l10);
   --color-content-primary-pressed: var(--uy-color-blue-l11);
   --color-content-primary-focus: var(--uy-color-blue-l7);
-  --color-content-primary-active: var(--uy-color-blue-l10);
+  --color-content-primary-active: var(--uy-color-blue-l6);
   --color-content-primary-disabled: var(--uy-color-grayscale-l8);
   --color-content-primary-high: var(--uy-color-blue-l10);
   --color-content-neutral: var(--uy-color-grayscale-l12);
@@ -412,7 +452,7 @@
   --color-content-form-pressed: var(--uy-color-grayscale-l12);
   --color-content-form-focus: var(--uy-color-grayscale-l12);
   --color-content-form-active: var(--uy-color-grayscale-l12);
-  --color-content-form-selected: var(--uy-color-blue-l12);
+  --color-content-form-selected: var(--uy-color-blue-l6);
   --color-content-form-disabled: var(--uy-color-grayscale-l8);
   --color-content-form-read-only: var(--uy-color-grayscale-l12);
   --color-content-form-invalid: var(--uy-color-red-l8);
@@ -423,6 +463,14 @@
   --color-content-inverted-focus: var(--uy-color-grayscale-l0);
   --color-content-inverted-active: var(--uy-color-grayscale-l0);
   --color-content-inverted-disabled: var(--uy-color-grayscale-l7);
+  --color-content-decorative-teal: var(--uy-color-teal-l6);
+  --color-content-decorative-teal-high: var(--uy-color-teal-l10);
+  --color-content-decorative-purple: var(--uy-color-purple-l6);
+  --color-content-decorative-purple-high: var(--uy-color-purple-l10);
+  --color-content-decorative-plum: var(--uy-color-plum-l6);
+  --color-content-decorative-plum-high: var(--uy-color-plum-l10);
+  --color-content-decorative-orange: var(--uy-color-orange-l6);
+  --color-content-decorative-orange-high: var(--uy-color-orange-l10);
   --color-border-primary: var(--uy-color-blue-l5);
   --color-border-primary-enabled: var(--uy-color-blue-l5);
   --color-border-primary-hover: var(--uy-color-blue-l6);
@@ -441,8 +489,10 @@
   --color-border-neutral-enabled: var(--uy-color-grayscale-l6);
   --color-border-neutral-hover: var(--uy-color-grayscale-l6);
   --color-border-neutral-active: var(--uy-color-blue-l5);
+  --color-border-neutral-pressed: var(--uy-color-grayscale-l7);
   --color-border-neutral-selected: var(--uy-color-grayscale-l6);
   --color-border-neutral-disabled: var(--uy-color-grayscale-l5);
+  --color-border-neutral-low: var(--uy-color-grayscale-l4);
   --color-border-danger: var(--uy-color-red-l4);
   --color-border-danger-lowest: var(--uy-color-red-l2);
   --color-border-warning: var(--uy-color-yellow-l4);
@@ -484,39 +534,45 @@
   --radius-md: var(--uy-radius-100);
   --radius-lg: var(--uy-radius-200);
   --radius-xl: var(--uy-radius-300);
-  --typography-default-h1: var(--uy-font-weight-medium) var(--uy-text-1000) / 1.104 var(--uy-font-sans);
-  --typography-sm-h1: var(--uy-font-weight-medium) var(--uy-text-600) / 1.104 var(--uy-font-sans);
-  --typography-default-h2: var(--uy-font-weight-medium) var(--uy-text-600) / 1.13 var(--uy-font-sans);
-  --typography-sm-h2: var(--uy-font-weight-medium) var(--uy-text-400) / 1.13 var(--uy-font-sans);
-  --typography-default-h3: var(--uy-font-weight-medium) var(--uy-text-400) / 1.12 var(--uy-font-sans);
-  --typography-sm-h3: var(--uy-font-weight-medium) var(--uy-text-200) / 1.12 var(--uy-font-sans);
-  --typography-default-h4: var(--uy-font-weight-medium) var(--uy-text-300) / 1.13 var(--uy-font-sans);
-  --typography-sm-h4: var(--uy-font-weight-medium) var(--uy-text-100) / 1.13 var(--uy-font-sans);
-  --typography-default-overline: var(--uy-font-weight-medium) var(--uy-text-300) / 1.25 var(--uy-font-sans);
-  --typography-sm-overline: var(--uy-font-weight-medium) var(--uy-text-100) / 1.25 var(--uy-font-sans);
-  --typography-default-subtitle: var(--uy-font-weight-regular) var(--uy-text-400) / 1.333 var(--uy-font-sans);
-  --typography-sm-subtitle: var(--uy-font-weight-regular) var(--uy-text-200) / 1.333 var(--uy-font-sans);
-  --typography-default-display-title: var(--uy-font-weight-medium) var(--uy-text-800) / 1.218 var(--uy-font-sans);
-  --typography-sm-display-title: var(--uy-font-weight-medium) var(--uy-text-400) / 1.218 var(--uy-font-sans);
-  --typography-default-display-body: var(--uy-font-weight-medium) var(--uy-text-500) / 1.2 var(--uy-font-sans);
-  --typography-sm-display-body: var(--uy-font-weight-medium) var(--uy-text-300) / 1.2 var(--uy-font-sans);
-  --typography-default-body: var(--uy-font-weight-regular) var(--uy-text-100) / 1.571 var(--uy-font-sans);
+  --shadow-raising: 0px 1px 2px 0px var(--uy-color-utility-shadow-raising);
+  --shadow-floating: 0px 6px 20px -4px var(--uy-color-utility-shadow-floating);
+  --shadow-flying: 0px 8px 20px 4px var(--uy-color-utility-shadow-flying);
+  --shadow-soaring: 0px 24px 32px -8px var(--uy-color-utility-shadow-soaring);
+  --typography-default-display-heading: var(--uy-font-weight-semibold) var(--uy-text-1000) / 1.25 var(--uy-font-sans);
+  --typography-sm-display-heading: var(--uy-font-weight-semibold) var(--uy-text-1000) / 1.25 var(--uy-font-sans);
+  --typography-default-h1: var(--uy-font-weight-semibold) var(--uy-text-800) / 1.2 var(--uy-font-sans);
+  --typography-sm-h1: var(--uy-font-weight-semibold) var(--uy-text-600) / 1.286 var(--uy-font-sans);
+  --typography-default-h2: var(--uy-font-weight-semibold) var(--uy-text-400) / 1.273 var(--uy-font-sans);
+  --typography-sm-h2: var(--uy-font-weight-semibold) var(--uy-text-500) / 1.333 var(--uy-font-sans);
+  --typography-default-h3: var(--uy-font-weight-semibold) var(--uy-text-200) / 1.333 var(--uy-font-sans);
+  --typography-sm-h3: var(--uy-font-weight-semibold) var(--uy-text-300) / 1.2 var(--uy-font-sans);
+  --typography-default-h4: var(--uy-font-weight-semibold) var(--uy-text-100) / 1.125 var(--uy-font-sans);
+  --typography-sm-h4: var(--uy-font-weight-semibold) var(--uy-text-200) / 1.333 var(--uy-font-sans);
+  --typography-default-overline: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
+  --typography-sm-overline: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
+  --typography-default-subtitle: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
+  --typography-sm-subtitle: var(--uy-font-weight-regular) var(--uy-text-100) / 1.333 var(--uy-font-sans);
+  --typography-default-display-title: var(--uy-font-weight-semibold) var(--uy-text-300) / 1.4 var(--uy-font-sans);
+  --typography-sm-display-title: var(--uy-font-weight-semibold) var(--uy-text-500) / 1.333 var(--uy-font-sans);
+  --typography-default-display-body: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
+  --typography-sm-display-body: var(--uy-font-weight-regular) var(--uy-text-200) / 1.556 var(--uy-font-sans);
+  --typography-default-body: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
   --typography-sm-body: var(--uy-font-weight-regular) var(--uy-text-75) / 1.571 var(--uy-font-sans);
-  --typography-default-body-strong: var(--uy-font-weight-medium) var(--uy-text-100) / 1.571 var(--uy-font-sans);
+  --typography-default-body-strong: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
   --typography-sm-body-strong: var(--uy-font-weight-medium) var(--uy-text-75) / 1.571 var(--uy-font-sans);
-  --typography-default-body-small: var(--uy-font-weight-regular) var(--uy-text-75) / 1.457 var(--uy-font-sans);
-  --typography-sm-body-small: var(--uy-font-weight-regular) var(--uy-text-50) / 1.457 var(--uy-font-sans);
-  --typography-default-body-small-strong: var(--uy-font-weight-medium) var(--uy-text-75) / 1.457 var(--uy-font-sans);
-  --typography-sm-body-small-strong: var(--uy-font-weight-medium) var(--uy-text-50) / 1.457 var(--uy-font-sans);
-  --typography-default-body-large: var(--uy-font-weight-regular) var(--uy-text-300) / 1.5 var(--uy-font-sans);
+  --typography-default-body-small: var(--uy-font-weight-regular) var(--uy-text-50) / 1.667 var(--uy-font-sans);
+  --typography-sm-body-small: var(--uy-font-weight-regular) var(--uy-text-50) / 1.667 var(--uy-font-sans);
+  --typography-default-body-small-strong: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667 var(--uy-font-sans);
+  --typography-sm-body-small-strong: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667 var(--uy-font-sans);
+  --typography-default-body-large: var(--uy-font-weight-regular) var(--uy-text-200) / 1.556 var(--uy-font-sans);
   --typography-sm-body-large: var(--uy-font-weight-regular) var(--uy-text-100) / 1.5 var(--uy-font-sans);
-  --typography-default-body-large-strong: var(--uy-font-weight-medium) var(--uy-text-300) / 1.5 var(--uy-font-sans);
+  --typography-default-body-large-strong: var(--uy-font-weight-medium) var(--uy-text-200) / 1.556 var(--uy-font-sans);
   --typography-sm-body-large-strong: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
-  --typography-default-action: var(--uy-font-weight-medium) var(--uy-text-100) / 1.571 var(--uy-font-sans);
+  --typography-default-action: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
   --typography-sm-action: var(--uy-font-weight-medium) var(--uy-text-75) / 1.571 var(--uy-font-sans);
-  --typography-default-action-small: var(--uy-font-weight-medium) var(--uy-text-75) / 1.457 var(--uy-font-sans);
-  --typography-sm-action-small: var(--uy-font-weight-medium) var(--uy-text-50) / 1.457 var(--uy-font-sans);
-  --typography-default-action-large: var(--uy-font-weight-medium) var(--uy-text-300) / 1.5 var(--uy-font-sans);
+  --typography-default-action-small: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667 var(--uy-font-sans);
+  --typography-sm-action-small: var(--uy-font-weight-medium) var(--uy-text-50) / 1.667 var(--uy-font-sans);
+  --typography-default-action-large: var(--uy-font-weight-medium) var(--uy-text-200) / 1.556 var(--uy-font-sans);
   --typography-sm-action-large: var(--uy-font-weight-medium) var(--uy-text-100) / 1.5 var(--uy-font-sans);
 }
 
@@ -664,6 +720,28 @@
   }
 }
 
+@keyframes zoom-in {
+  0% {
+    opacity: 0;
+    transform: scale(0);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+@keyframes zoom-out {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  100% {
+    opacity: 0;
+    transform: scale(0);
+  }
+}
+
 
 /* this is Midnight css reset */
 @layer base {
@@ -676,7 +754,7 @@
     font-size: 14px;
     /* Line height value taken from normalize.css */
     line-height: 1.5;
-    -webkit-font-smoothing: subpixel-antialiased;
+    -webkit-font-smoothing: antialiased;
     -webkit-tap-highlight-color: transparent;
     -moz-osx-font-smoothing: grayscale;
   }

package/dist/esm/utils/merge-config.js

@@ -16,6 +16,7 @@ const r = [
   "800",
   "1000"
 ], d = [
+  "display-heading",
   "h1",
   "h2",
   "h3",
@@ -65,7 +66,7 @@ const r = [
   "xl",
   "circle",
   "pill"
-], n = ["canvas", "raising", "floating", "flying", "soaring"], s = (e) => !!(/^[a-z]+-l\d+$/.test(e) || /^(?:canvas|surface|content|border|utility)-.+$/.test(e)), c = {
+], n = ["canvas", "raising", "floating", "flying", "soaring"], s = (e) => !!(/^[a-z]+-l\d+$/.test(e) || /^(?:canvas|surface|content|border|utility)-.+$/.test(e)), a = {
   prefix: "uy",
   extend: {
     classGroups: {
@@ -167,5 +168,5 @@ const r = [
   }
 };
 export {
-  c as twMergeConfig
+  a as twMergeConfig
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-themes",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "main": "./dist/esm/index.js",
   "types": "./dist/esm/index.d.ts",
   "style": "./dist/css/unity.css",
@@ -34,32 +34,33 @@
     "@payfit/code-pushup-tools": "0.0.0-use.local",
     "@payfit/hr-app-eslint": "0.0.0-use.local",
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
+    "@payfit/storybook-config": "0.0.0-use.local",
     "@payfit/vite-configs": "0.0.0-use.local",
-    "@storybook/addon-a11y": "9.1.13",
-    "@storybook/addon-docs": "9.1.13",
-    "@storybook/addon-links": "9.1.13",
-    "@storybook/addon-vitest": "9.1.13",
-    "@storybook/react-vite": "9.1.13",
-    "@storybook/test-runner": "0.23.0",
+    "@storybook/addon-a11y": "10.2.0",
+    "@storybook/addon-docs": "10.2.0",
+    "@storybook/addon-links": "10.2.0",
+    "@storybook/addon-vitest": "10.2.0",
+    "@storybook/react-vite": "10.2.0",
+    "@storybook/test-runner": "0.24.2",
     "@tailwindcss/vite": "4.1.11",
     "@types/lodash": "4.14.202",
     "@types/node": "^22.0.0",
     "@types/react": "18.3.18",
     "@types/react-dom": "18.3.5",
     "@types/tinycolor2": "1.4.6",
-    "@vitest/browser": "3.2.4",
+    "@vitest/browser": "4.0.6",
     "msw": "2.8.4",
-    "msw-storybook-addon": "^2.0.5",
-    "playwright": "1.49.1",
+    "msw-storybook-addon": "^2.0.6",
+    "playwright": "1.55.1",
     "postcss-import": "16.1.0",
     "prettier": "3.1.0",
     "react": "18.3.1",
     "react-dom": "18.3.1",
-    "storybook": "9.1.13",
+    "storybook": "10.2.0",
     "tsx": "4.17.0",
     "typescript": "5.9.2",
-    "vite": "7.1.6",
-    "vitest": "3.2.4"
+    "vite": "7.1.12",
+    "vitest": "4.0.9"
   },
   "peerDependencies": {
     "@fontsource/inter": "5.0.19",

package/src/utils/merge-config.ts

@@ -21,6 +21,7 @@ const unitySpacing = [
 
 // Unity typography classes - actual generated class names (without -sm variants)
 const unityTypography = [
+  'display-heading',
   'h1',
   'h2',
   'h3',

package/src/utils/tailwind-merge.test.ts

@@ -236,6 +236,7 @@ describe('uyMerge', () => {
 
     it('should handle all typography variants', () => {
       const typographyClasses = [
+        'display-heading',
         'h1',
         'h2',
         'h3',

package/tokens/animations.json

@@ -81,6 +81,22 @@
         "timingFunction": "ease-out",
         "iterationCount": "1"
       }
+    },
+    "zoom-in": {
+      "$value": {
+        "name": "zoom-in",
+        "duration": "0.3s",
+        "timingFunction": "ease-in",
+        "iterationCount": "1"
+      }
+    },
+    "zoom-out": {
+      "$value": {
+        "name": "zoom-out",
+        "duration": "0.3s",
+        "timingFunction": "ease-out",
+        "iterationCount": "1"
+      }
     }
   }
 }

package/tokens/colors.json

@@ -9,10 +9,10 @@
         "$value": "#f8f9fc"
       },
       "L3": {
-        "$value": "#eff2f6"
+        "$value": "#f5f6f9"
       },
       "L4": {
-        "$value": "#e9edf2"
+        "$value": "#eceff4"
       },
       "L5": {
         "$value": "#e0e5eb"
@@ -526,12 +526,53 @@
           "default": {
             "$value": "{color.grayscale.L3}"
           },
+          "enabled": {
+            "$value": "{color.grayscale.L3}"
+          },
           "hover": {
-            "$value": "{color.grayscale.L2}"
+            "$value": "{color.grayscale.L4}"
+          },
+          "pressed": {
+            "$value": "{color.grayscale.L5}"
+          },
+          "focus": {
+            "$value": "{color.grayscale.L4}"
+          },
+          "active": {
+            "$value": "{color.grayscale.L5}"
+          },
+          "disabled": {
+            "$value": "{color.grayscale.L3}"
+          },
+          "selected": {
+            "$value": "{color.grayscale.L4}"
           }
         },
         "lowest": {
-          "$value": "{color.grayscale.L2}"
+          "default": {
+            "$value": "{color.grayscale.L4}"
+          },
+          "enabled": {
+            "$value": "{color.grayscale.L4}"
+          },
+          "hover": {
+            "$value": "{color.grayscale.L5}"
+          },
+          "pressed": {
+            "$value": "{color.grayscale.L6}"
+          },
+          "focus": {
+            "$value": "{color.grayscale.L5}"
+          },
+          "active": {
+            "$value": "{color.grayscale.L6}"
+          },
+          "disabled": {
+            "$value": "{color.grayscale.L4}"
+          },
+          "selected": {
+            "$value": "{color.grayscale.L5}"
+          }
         }
       },
       "danger": {
@@ -715,32 +756,63 @@
         }
       },
       "form": {
-        "enabled": {
-          "$value": "{color.grayscale.L0}"
-        },
-        "hover": {
-          "$value": "{color.grayscale.L0}"
-        },
-        "pressed": {
-          "$value": "{color.grayscale.L0}"
-        },
-        "focus": {
-          "$value": "{color.grayscale.L0}"
-        },
-        "active": {
-          "$value": "{color.blue.L5}"
-        },
-        "selected": {
-          "$value": "{color.blue.L2}"
-        },
-        "disabled": {
-          "$value": "{color.grayscale.L3}"
-        },
-        "read-only": {
-          "$value": "{color.grayscale.L8}"
+        "default": {
+          "enabled": {
+            "$value": "{color.grayscale.L0}"
+          },
+          "hover": {
+            "$value": "{color.grayscale.L0}"
+          },
+          "pressed": {
+            "$value": "{color.grayscale.L0}"
+          },
+          "focus": {
+            "$value": "{color.grayscale.L0}"
+          },
+          "active": {
+            "$value": "{color.blue.L5}"
+          },
+          "selected": {
+            "$value": "{color.blue.L1}"
+          },
+          "disabled": {
+            "$value": "{color.grayscale.L3}"
+          },
+          "read-only": {
+            "$value": "{color.grayscale.L8}"
+          },
+          "error": {
+            "$value": "{color.red.L2}"
+          }
         },
-        "error": {
-          "$value": "{color.red.L2}"
+        "high": {
+          "enabled": {
+            "$value": "{color.grayscale.L3}"
+          },
+          "hover": {
+            "$value": "{color.grayscale.L4}"
+          },
+          "pressed": {
+            "$value": "{color.grayscale.L5}"
+          },
+          "focus": {
+            "$value": "{color.grayscale.L3}"
+          },
+          "active": {
+            "$value": "{color.grayscale.L0}"
+          },
+          "selected": {
+            "$value": "{color.blue.L2}"
+          },
+          "disabled": {
+            "$value": "{color.grayscale.L2}"
+          },
+          "read-only": {
+            "$value": "{color.grayscale.L2}"
+          },
+          "error": {
+            "$value": "{color.red.L2}"
+          }
         }
       },
       "inverted": {
@@ -764,6 +836,62 @@
             "$value": "{color.grayscale.L11}"
           }
         }
+      },
+      "decorative-teal": {
+        "default": {
+          "$value": "{color.teal.L6}"
+        },
+        "high": {
+          "$value": "{color.teal.L9}"
+        },
+        "low": {
+          "$value": "{color.teal.L3}"
+        },
+        "lowest": {
+          "$value": "{color.teal.L2}"
+        }
+      },
+      "decorative-purple": {
+        "high": {
+          "$value": "{color.purple.L9}"
+        },
+        "default": {
+          "$value": "{color.purple.L6}"
+        },
+        "low": {
+          "$value": "{color.purple.L3}"
+        },
+        "lowest": {
+          "$value": "{color.purple.L2}"
+        }
+      },
+      "decorative-plum": {
+        "default": {
+          "$value": "{color.plum.L6}"
+        },
+        "high": {
+          "$value": "{color.plum.L9}"
+        },
+        "low": {
+          "$value": "{color.plum.L3}"
+        },
+        "lowest": {
+          "$value": "{color.plum.L2}"
+        }
+      },
+      "decorative-orange": {
+        "default": {
+          "$value": "{color.orange.L6}"
+        },
+        "high": {
+          "$value": "{color.orange.L9}"
+        },
+        "low": {
+          "$value": "{color.orange.L3}"
+        },
+        "lowest": {
+          "$value": "{color.orange.L2}"
+        }
       }
     },
     "content": {
@@ -786,7 +914,7 @@
             "$value": "{color.blue.L7}"
           },
           "active": {
-            "$value": "{color.blue.L10}"
+            "$value": "{color.blue.L6}"
           },
           "disabled": {
             "$value": "{color.grayscale.L8}"
@@ -984,7 +1112,7 @@
           "$value": "{color.grayscale.L12}"
         },
         "selected": {
-          "$value": "{color.blue.L12}"
+          "$value": "{color.blue.L6}"
         },
         "disabled": {
           "$value": "{color.grayscale.L8}"
@@ -1018,6 +1146,38 @@
         "disabled": {
           "$value": "{color.grayscale.L7}"
         }
+      },
+      "decorative-teal": {
+        "default": {
+          "$value": "{color.teal.L6}"
+        },
+        "high": {
+          "$value": "{color.teal.L10}"
+        }
+      },
+      "decorative-purple": {
+        "default": {
+          "$value": "{color.purple.L6}"
+        },
+        "high": {
+          "$value": "{color.purple.L10}"
+        }
+      },
+      "decorative-plum": {
+        "default": {
+          "$value": "{color.plum.L6}"
+        },
+        "high": {
+          "$value": "{color.plum.L10}"
+        }
+      },
+      "decorative-orange": {
+        "default": {
+          "$value": "{color.orange.L6}"
+        },
+        "high": {
+          "$value": "{color.orange.L10}"
+        }
       }
     },
     "border": {
@@ -1082,12 +1242,20 @@
           "active": {
             "$value": "{color.blue.L5}"
           },
+          "pressed": {
+            "$value": "{color.grayscale.L7}"
+          },
           "selected": {
             "$value": "{color.grayscale.L6}"
           },
           "disabled": {
             "$value": "{color.grayscale.L5}"
           }
+        },
+        "low": {
+          "default": {
+            "$value": "{color.grayscale.L4}"
+          }
         }
       },
       "danger": {
@@ -1200,7 +1368,21 @@
         "$value": "{color.yellow.L4}"
       },
       "backdrop": {
-        "$value": "#1C2024A3"
+        "$value": "#030E1D99"
+      },
+      "shadow": {
+        "raising": {
+          "$value": "#0420400A"
+        },
+        "floating": {
+          "$value": "#04204014"
+        },
+        "flying": {
+          "$value": "#0420401A"
+        },
+        "soaring": {
+          "$value": "#0420401f"
+        }
       }
     }
   }

package/tokens/shadows.json

@@ -7,7 +7,7 @@
     },
     "raising": {
       "$value": {
-        "color": "#04204010",
+        "color": "{color.utility.shadow.raising}",
         "offsetX": "0px",
         "offsetY": "1px",
         "blur": "2px",
@@ -16,7 +16,7 @@
     },
     "floating": {
       "$value": {
-        "color": "#04204014",
+        "color": "{color.utility.shadow.floating}",
         "offsetX": "0px",
         "offsetY": "6px",
         "blur": "20px",
@@ -25,7 +25,7 @@
     },
     "flying": {
       "$value": {
-        "color": "#0420401a",
+        "color": "{color.utility.shadow.flying}",
         "offsetX": "0px",
         "offsetY": "8px",
         "blur": "20px",
@@ -34,7 +34,7 @@
     },
     "soaring": {
       "$value": {
-        "color": "#0420401f",
+        "color": "{color.utility.shadow.soaring}",
         "offsetX": "0px",
         "offsetY": "24px",
         "blur": "32px",

package/tokens/sizes.json

@@ -16,7 +16,7 @@
       }
     },
     "xl": {
-      "$value": "1144px",
+      "$value": "1360px",
       "$description": "Maximum width for layout containers at extra-large resolutions",
       "$extensions": {
         "com.payfit.unity.only": ["maxWidth"]

package/tokens/text.json

@@ -31,7 +31,7 @@
     "$type": "dimension",
     "$description": "Font sizes for the design system",
     "50": {
-      "$value": "11px"
+      "$value": "12px"
     },
     "75": {
       "$value": "14px"
@@ -46,19 +46,19 @@
       "$value": "20px"
     },
     "400": {
-      "$value": "23px"
+      "$value": "22px"
     },
     "500": {
-      "$value": "26px"
+      "$value": "24px"
     },
     "600": {
-      "$value": "29px"
+      "$value": "28px"
     },
     "800": {
-      "$value": "32px"
+      "$value": "30px"
     },
     "1000": {
-      "$value": "36px"
+      "$value": "32px"
     },
     "1200": {
       "$value": "41px"

package/tokens/typography.json

@@ -1,20 +1,38 @@
 {
   "typography": {
     "$type": "typography",
-    "h1": {
+    "display-heading": {
       "default": {
         "$value": {
           "fontFamily": "{font.sans}",
           "fontSize": "{text.1000}",
-          "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.104
+          "fontWeight": "{font-weight.semibold}",
+          "lineHeight": 1.25
         }
       },
       "sm": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.104,
+          "fontSize": "{text.1000}",
+          "fontWeight": "{font-weight.semibold}",
+          "lineHeight": 1.25
+        }
+      }
+    },
+    "h1": {
+      "default": {
+        "$value": {
+          "fontFamily": "{font.sans}",
+          "fontSize": "{text.800}",
+          "fontWeight": "{font-weight.semibold}",
+          "lineHeight": 1.2
+        }
+      },
+      "sm": {
+        "$value": {
+          "fontFamily": "{font.sans}",
+          "fontWeight": "{font-weight.semibold}",
+          "lineHeight": 1.286,
           "fontSize": "{text.600}"
         }
       }
@@ -23,17 +41,17 @@
       "default": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontSize": "{text.600}",
-          "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.13
+          "fontSize": "{text.400}",
+          "fontWeight": "{font-weight.semibold}",
+          "lineHeight": 1.273
         }
       },
       "sm": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.13,
-          "fontSize": "{text.400}"
+          "fontWeight": "{font-weight.semibold}",
+          "lineHeight": 1.333,
+          "fontSize": "{text.500}"
         }
       }
     },
@@ -41,17 +59,17 @@
       "default": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontSize": "{text.400}",
-          "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.12
+          "fontSize": "{text.200}",
+          "fontWeight": "{font-weight.semibold}",
+          "lineHeight": 1.333
         }
       },
       "sm": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.12,
-          "fontSize": "{text.200}"
+          "fontWeight": "{font-weight.semibold}",
+          "lineHeight": 1.2,
+          "fontSize": "{text.300}"
         }
       }
     },
@@ -59,17 +77,17 @@
       "default": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontSize": "{text.300}",
-          "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.13
+          "fontSize": "{text.100}",
+          "fontWeight": "{font-weight.semibold}",
+          "lineHeight": 1.125
         }
       },
       "sm": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.13,
-          "fontSize": "{text.100}"
+          "fontWeight": "{font-weight.semibold}",
+          "lineHeight": 1.333,
+          "fontSize": "{text.200}"
         }
       }
     },
@@ -77,16 +95,16 @@
       "default": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontSize": "{text.300}",
+          "fontSize": "{text.100}",
           "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.25
+          "lineHeight": 1.5
         }
       },
       "sm": {
         "$value": {
           "fontFamily": "{font.sans}",
           "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.25,
+          "lineHeight": 1.5,
           "fontSize": "{text.100}"
         }
       }
@@ -95,9 +113,9 @@
       "default": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontSize": "{text.400}",
+          "fontSize": "{text.100}",
           "fontWeight": "{font-weight.regular}",
-          "lineHeight": 1.333
+          "lineHeight": 1.5
         }
       },
       "sm": {
@@ -105,7 +123,7 @@
           "fontFamily": "{font.sans}",
           "fontWeight": "{font-weight.regular}",
           "lineHeight": 1.333,
-          "fontSize": "{text.200}"
+          "fontSize": "{text.100}"
         }
       }
     },
@@ -113,17 +131,17 @@
       "default": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontSize": "{text.800}",
-          "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.218
+          "fontSize": "{text.300}",
+          "fontWeight": "{font-weight.semibold}",
+          "lineHeight": 1.4
         }
       },
       "sm": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.218,
-          "fontSize": "{text.400}"
+          "fontWeight": "{font-weight.semibold}",
+          "lineHeight": 1.333,
+          "fontSize": "{text.500}"
         }
       }
     },
@@ -131,17 +149,17 @@
       "default": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontSize": "{text.500}",
-          "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.2
+          "fontSize": "{text.100}",
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": 1.5
         }
       },
       "sm": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.2,
-          "fontSize": "{text.300}"
+          "fontWeight": "{font-weight.regular}",
+          "lineHeight": 1.556,
+          "fontSize": "{text.200}"
         }
       }
     },
@@ -151,7 +169,7 @@
           "fontFamily": "{font.sans}",
           "fontSize": "{text.100}",
           "fontWeight": "{font-weight.regular}",
-          "lineHeight": 1.571
+          "lineHeight": 1.5
         }
       },
       "sm": {
@@ -169,7 +187,7 @@
           "fontFamily": "{font.sans}",
           "fontSize": "{text.100}",
           "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.571
+          "lineHeight": 1.5
         }
       },
       "sm": {
@@ -185,16 +203,16 @@
       "default": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontSize": "{text.75}",
+          "fontSize": "{text.50}",
           "fontWeight": "{font-weight.regular}",
-          "lineHeight": 1.457
+          "lineHeight": 1.667
         }
       },
       "sm": {
         "$value": {
           "fontFamily": "{font.sans}",
           "fontWeight": "{font-weight.regular}",
-          "lineHeight": 1.457,
+          "lineHeight": 1.667,
           "fontSize": "{text.50}"
         }
       }
@@ -203,16 +221,16 @@
       "default": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontSize": "{text.75}",
+          "fontSize": "{text.50}",
           "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.457
+          "lineHeight": 1.667
         }
       },
       "sm": {
         "$value": {
           "fontFamily": "{font.sans}",
           "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.457,
+          "lineHeight": 1.667,
           "fontSize": "{text.50}"
         }
       }
@@ -221,9 +239,9 @@
       "default": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontSize": "{text.300}",
+          "fontSize": "{text.200}",
           "fontWeight": "{font-weight.regular}",
-          "lineHeight": 1.5
+          "lineHeight": 1.556
         }
       },
       "sm": {
@@ -239,9 +257,9 @@
       "default": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontSize": "{text.300}",
+          "fontSize": "{text.200}",
           "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.5
+          "lineHeight": 1.556
         }
       },
       "sm": {
@@ -259,7 +277,7 @@
           "fontFamily": "{font.sans}",
           "fontSize": "{text.100}",
           "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.571
+          "lineHeight": 1.5
         }
       },
       "sm": {
@@ -275,16 +293,16 @@
       "default": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontSize": "{text.75}",
+          "fontSize": "{text.50}",
           "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.457
+          "lineHeight": 1.667
         }
       },
       "sm": {
         "$value": {
           "fontFamily": "{font.sans}",
           "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.457,
+          "lineHeight": 1.667,
           "fontSize": "{text.50}"
         }
       }
@@ -293,9 +311,9 @@
       "default": {
         "$value": {
           "fontFamily": "{font.sans}",
-          "fontSize": "{text.300}",
+          "fontSize": "{text.200}",
           "fontWeight": "{font-weight.medium}",
-          "lineHeight": 1.5
+          "lineHeight": 1.556
         }
       },
       "sm": {