Skip to content

chore: upgrade style-dictionary to v4 #1046

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

chore: upgrade style-dictionary to v4 #1046

wants to merge 3 commits into from
+1,512 −1,064

Conversation

AlanBreck
Copy link
Collaborator

...also converts files to .ts

@AlanBreck AlanBreck force-pushed the upgrade-style-dictionary branch from e8ecc91 to e9896e3 Compare April 3, 2025 02:08
@AlanBreck AlanBreck marked this pull request as draft April 3, 2025 02:28
@AlanBreck AlanBreck force-pushed the upgrade-style-dictionary branch from e2d19f8 to 9acd969 Compare April 5, 2025 01:26
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 5, 2025

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1046.pr.nala.bravesoftware.com/
✅ Commit preview: https://1046.pr.nala.bravesoftware.com/commit-2c1ff708964e128f7f8fac79ea9cae625a9bf505/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7486 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6712 bytes
---
- ./tokens/css/variables-ios.old.css: 7033 bytes
+ ./tokens/css/variables-ios.css: 7111 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13627 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 526 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1957 bytes
---
- ./tokens/css/variables-search.old.css: 2409 bytes
+ ./tokens/css/variables-search.css: 2433 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 119686 bytes
+ ./tokens/css/variables.css: 119756 bytes
Variables Diff: variables-android.diff 
--- ./tokens/css/variables-android.old.css	2025-04-05 01:44:08.155541512 +0000
+++ ./tokens/css/variables-android.css	2025-04-05 01:43:37.296122502 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Apr 02 2025 20:25:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Apr 05 2025 01:43:37 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -25,102 +25,102 @@
   --leo-typography-android-default-regular-font-weight: 400;
   --leo-typography-android-default-regular-letter-spacing: -0.2px;
   --leo-typography-android-default-regular-line-height: 20px;
-  --leo-typography-android-default-regular-paragraph-indent: 0;
-  --leo-typography-android-default-regular-paragraph-spacing: 0;
+  --leo-typography-android-default-regular-paragraph-indent: 0px;
+  --leo-typography-android-default-regular-paragraph-spacing: 0px;
   --leo-typography-android-default-semibold-font-size: 14px;
   --leo-typography-android-default-semibold-font-weight: 600;
   --leo-typography-android-default-semibold-letter-spacing: -0.2px;
   --leo-typography-android-default-semibold-line-height: 20px;
-  --leo-typography-android-default-semibold-paragraph-indent: 0;
-  --leo-typography-android-default-semibold-paragraph-spacing: 0;
+  --leo-typography-android-default-semibold-paragraph-indent: 0px;
+  --leo-typography-android-default-semibold-paragraph-spacing: 0px;
   --leo-typography-android-heading-display1-font-size: 45px;
   --leo-typography-android-heading-display1-font-weight: 500;
-  --leo-typography-android-heading-display1-letter-spacing: 0;
+  --leo-typography-android-heading-display1-letter-spacing: 0px;
   --leo-typography-android-heading-display1-line-height: 52px;
-  --leo-typography-android-heading-display1-paragraph-indent: 0;
-  --leo-typography-android-heading-display1-paragraph-spacing: 0;
+  --leo-typography-android-heading-display1-paragraph-indent: 0px;
+  --leo-typography-android-heading-display1-paragraph-spacing: 0px;
   --leo-typography-android-heading-display2-font-size: 36px;
   --leo-typography-android-heading-display2-font-weight: 500;
-  --leo-typography-android-heading-display2-letter-spacing: 0;
+  --leo-typography-android-heading-display2-letter-spacing: 0px;
   --leo-typography-android-heading-display2-line-height: 44px;
-  --leo-typography-android-heading-display2-paragraph-indent: 0;
-  --leo-typography-android-heading-display2-paragraph-spacing: 0;
+  --leo-typography-android-heading-display2-paragraph-indent: 0px;
+  --leo-typography-android-heading-display2-paragraph-spacing: 0px;
   --leo-typography-android-heading-h1-font-size: 32px;
   --leo-typography-android-heading-h1-font-weight: 500;
-  --leo-typography-android-heading-h1-letter-spacing: 0;
+  --leo-typography-android-heading-h1-letter-spacing: 0px;
   --leo-typography-android-heading-h1-line-height: 40px;
-  --leo-typography-android-heading-h1-paragraph-indent: 0;
-  --leo-typography-android-heading-h1-paragraph-spacing: 0;
+  --leo-typography-android-heading-h1-paragraph-indent: 0px;
+  --leo-typography-android-heading-h1-paragraph-spacing: 0px;
   --leo-typography-android-heading-h2-font-size: 28px;
   --leo-typography-android-heading-h2-font-weight: 500;
-  --leo-typography-android-heading-h2-letter-spacing: 0;
+  --leo-typography-android-heading-h2-letter-spacing: 0px;
   --leo-typography-android-heading-h2-line-height: 36px;
-  --leo-typography-android-heading-h2-paragraph-indent: 0;
-  --leo-typography-android-heading-h2-paragraph-spacing: 0;
+  --leo-typography-android-heading-h2-paragraph-indent: 0px;
+  --leo-typography-android-heading-h2-paragraph-spacing: 0px;
   --leo-typography-android-heading-h3-font-size: 22px;
   --leo-typography-android-heading-h3-font-weight: 500;
-  --leo-typography-android-heading-h3-letter-spacing: 0;
+  --leo-typography-android-heading-h3-letter-spacing: 0px;
   --leo-typography-android-heading-h3-line-height: 28px;
-  --leo-typography-android-heading-h3-paragraph-indent: 0;
-  --leo-typography-android-heading-h3-paragraph-spacing: 0;
+  --leo-typography-android-heading-h3-paragraph-indent: 0px;
+  --leo-typography-android-heading-h3-paragraph-spacing: 0px;
   --leo-typography-android-heading-h4-font-size: 16px;
   --leo-typography-android-heading-h4-font-weight: 600;
-  --leo-typography-android-heading-h4-letter-spacing: 0;
+  --leo-typography-android-heading-h4-letter-spacing: 0px;
   --leo-typography-android-heading-h4-line-height: 24px;
-  --leo-typography-android-heading-h4-paragraph-indent: 0;
-  --leo-typography-android-heading-h4-paragraph-spacing: 0;
+  --leo-typography-android-heading-h4-paragraph-indent: 0px;
+  --leo-typography-android-heading-h4-paragraph-spacing: 0px;
   --leo-typography-android-large-regular-font-size: 16px;
   --leo-typography-android-large-regular-font-weight: 400;
   --leo-typography-android-large-regular-letter-spacing: -0.2px;
   --leo-typography-android-large-regular-line-height: 24px;
-  --leo-typography-android-large-regular-paragraph-indent: 0;
-  --leo-typography-android-large-regular-paragraph-spacing: 0;
+  --leo-typography-android-large-regular-paragraph-indent: 0px;
+  --leo-typography-android-large-regular-paragraph-spacing: 0px;
   --leo-typography-android-large-semibold-font-size: 16px;
   --leo-typography-android-large-semibold-font-weight: 600;
-  --leo-typography-android-large-semibold-letter-spacing: 0;
+  --leo-typography-android-large-semibold-letter-spacing: 0px;
   --leo-typography-android-large-semibold-line-height: 24px;
-  --leo-typography-android-large-semibold-paragraph-indent: 0;
-  --leo-typography-android-large-semibold-paragraph-spacing: 0;
+  --leo-typography-android-large-semibold-paragraph-indent: 0px;
+  --leo-typography-android-large-semibold-paragraph-spacing: 0px;
   --leo-typography-android-monospace-default-font-size: 14px;
   --leo-typography-android-monospace-default-font-weight: 400;
-  --leo-typography-android-monospace-default-letter-spacing: 0;
+  --leo-typography-android-monospace-default-letter-spacing: 0px;
   --leo-typography-android-monospace-default-line-height: 20px;
-  --leo-typography-android-monospace-default-paragraph-indent: 0;
-  --leo-typography-android-monospace-default-paragraph-spacing: 0;
+  --leo-typography-android-monospace-default-paragraph-indent: 0px;
+  --leo-typography-android-monospace-default-paragraph-spacing: 0px;
   --leo-typography-android-monospace-large-font-size: 16px;
   --leo-typography-android-monospace-large-font-weight: 400;
-  --leo-typography-android-monospace-large-letter-spacing: 0;
+  --leo-typography-android-monospace-large-letter-spacing: 0px;
   --leo-typography-android-monospace-large-line-height: 24px;
-  --leo-typography-android-monospace-large-paragraph-indent: 0;
-  --leo-typography-android-monospace-large-paragraph-spacing: 0;
+  --leo-typography-android-monospace-large-paragraph-indent: 0px;
+  --leo-typography-android-monospace-large-paragraph-spacing: 0px;
   --leo-typography-android-monospace-small-font-size: 12px;
   --leo-typography-android-monospace-small-font-weight: 400;
-  --leo-typography-android-monospace-small-letter-spacing: 0;
+  --leo-typography-android-monospace-small-letter-spacing: 0px;
   --leo-typography-android-monospace-small-line-height: 16px;
-  --leo-typography-android-monospace-small-paragraph-indent: 0;
-  --leo-typography-android-monospace-small-paragraph-spacing: 0;
+  --leo-typography-android-monospace-small-paragraph-indent: 0px;
+  --leo-typography-android-monospace-small-paragraph-spacing: 0px;
   --leo-typography-android-small-regular-font-size: 12px;
   --leo-typography-android-small-regular-font-weight: 400;
-  --leo-typography-android-small-regular-letter-spacing: 0;
+  --leo-typography-android-small-regular-letter-spacing: 0px;
   --leo-typography-android-small-regular-line-height: 16px;
-  --leo-typography-android-small-regular-paragraph-indent: 0;
-  --leo-typography-android-small-regular-paragraph-spacing: 0;
+  --leo-typography-android-small-regular-paragraph-indent: 0px;
+  --leo-typography-android-small-regular-paragraph-spacing: 0px;
   --leo-typography-android-small-semibold-font-size: 12px;
   --leo-typography-android-small-semibold-font-weight: 600;
-  --leo-typography-android-small-semibold-letter-spacing: 0;
+  --leo-typography-android-small-semibold-letter-spacing: 0px;
   --leo-typography-android-small-semibold-line-height: 16px;
-  --leo-typography-android-small-semibold-paragraph-indent: 0;
-  --leo-typography-android-small-semibold-paragraph-spacing: 0;
+  --leo-typography-android-small-semibold-paragraph-indent: 0px;
+  --leo-typography-android-small-semibold-paragraph-spacing: 0px;
   --leo-typography-android-x-small-regular-font-size: 11px;
   --leo-typography-android-x-small-regular-font-weight: 400;
-  --leo-typography-android-x-small-regular-letter-spacing: 0;
+  --leo-typography-android-x-small-regular-letter-spacing: 0px;
   --leo-typography-android-x-small-regular-line-height: 16px;
-  --leo-typography-android-x-small-regular-paragraph-indent: 0;
-  --leo-typography-android-x-small-regular-paragraph-spacing: 0;
+  --leo-typography-android-x-small-regular-paragraph-indent: 0px;
+  --leo-typography-android-x-small-regular-paragraph-spacing: 0px;
   --leo-typography-android-x-small-semibold-font-size: 11px;
   --leo-typography-android-x-small-semibold-font-weight: 600;
-  --leo-typography-android-x-small-semibold-letter-spacing: 0;
+  --leo-typography-android-x-small-semibold-letter-spacing: 0px;
   --leo-typography-android-x-small-semibold-line-height: 16px;
-  --leo-typography-android-x-small-semibold-paragraph-indent: 0;
-  --leo-typography-android-x-small-semibold-paragraph-spacing: 0;
+  --leo-typography-android-x-small-semibold-paragraph-indent: 0px;
+  --leo-typography-android-x-small-semibold-paragraph-spacing: 0px;
 }
Variables Diff: variables-browser.diff 
--- ./tokens/css/variables-browser.old.css	2025-04-05 01:44:08.613547619 +0000
+++ ./tokens/css/variables-browser.css	2025-04-05 01:43:36.624113472 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Apr 02 2025 20:25:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Apr 05 2025 01:43:36 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -19,82 +19,82 @@
   --leo-font-x-small-semibold: 600 12px/14.4px Inter Variable;
   --leo-typography-default-link-font-size: 14px;
   --leo-typography-default-link-font-weight: 400;
-  --leo-typography-default-link-letter-spacing: 0;
+  --leo-typography-default-link-letter-spacing: 0px;
   --leo-typography-default-link-line-height: 16.8px;
-  --leo-typography-default-link-paragraph-indent: 0;
-  --leo-typography-default-link-paragraph-spacing: 0;
+  --leo-typography-default-link-paragraph-indent: 0px;
+  --leo-typography-default-link-paragraph-spacing: 0px;
   --leo-typography-default-regular-font-size: 14px;
   --leo-typography-default-regular-font-weight: 400;
   --leo-typography-default-regular-letter-spacing: -0.1px;
   --leo-typography-default-regular-line-height: 16.8px;
-  --leo-typography-default-regular-paragraph-indent: 0;
-  --leo-typography-default-regular-paragraph-spacing: 0;
+  --leo-typography-default-regular-paragraph-indent: 0px;
+  --leo-typography-default-regular-paragraph-spacing: 0px;
   --leo-typography-default-semibold-font-size: 14px;
   --leo-typography-default-semibold-font-weight: 600;
   --leo-typography-default-semibold-letter-spacing: -0.1px;
   --leo-typography-default-semibold-line-height: 16.8px;
-  --leo-typography-default-semibold-paragraph-indent: 0;
-  --leo-typography-default-semibold-paragraph-spacing: 0;
+  --leo-typography-default-semibold-paragraph-indent: 0px;
+  --leo-typography-default-semibold-paragraph-spacing: 0px;
   --leo-typography-large-link-font-size: 16px;
   --leo-typography-large-link-font-weight: 400;
-  --leo-typography-large-link-letter-spacing: 0;
+  --leo-typography-large-link-letter-spacing: 0px;
   --leo-typography-large-link-line-height: 19.2px;
-  --leo-typography-large-link-paragraph-indent: 0;
-  --leo-typography-large-link-paragraph-spacing: 0;
+  --leo-typography-large-link-paragraph-indent: 0px;
+  --leo-typography-large-link-paragraph-spacing: 0px;
   --leo-typography-large-regular-font-size: 16px;
   --leo-typography-large-regular-font-weight: 400;
   --leo-typography-large-regular-letter-spacing: -0.2px;
   --leo-typography-large-regular-line-height: 19.2px;
-  --leo-typography-large-regular-paragraph-indent: 0;
-  --leo-typography-large-regular-paragraph-spacing: 0;
+  --leo-typography-large-regular-paragraph-indent: 0px;
+  --leo-typography-large-regular-paragraph-spacing: 0px;
   --leo-typography-large-semibold-font-size: 16px;
   --leo-typography-large-semibold-font-weight: 600;
   --leo-typography-large-semibold-letter-spacing: -0.2px;
   --leo-typography-large-semibold-line-height: 19.2px;
-  --leo-typography-large-semibold-paragraph-indent: 0;
-  --leo-typography-large-semibold-paragraph-spacing: 0;
+  --leo-typography-large-semibold-paragraph-indent: 0px;
+  --leo-typography-large-semibold-paragraph-spacing: 0px;
   --leo-typography-sidebar-product-title-font-size: 19px;
   --leo-typography-sidebar-product-title-font-weight: 600;
   --leo-typography-sidebar-product-title-letter-spacing: -0.285px;
   --leo-typography-sidebar-product-title-line-height: 19px;
-  --leo-typography-sidebar-product-title-paragraph-indent: 0;
-  --leo-typography-sidebar-product-title-paragraph-spacing: 0;
+  --leo-typography-sidebar-product-title-paragraph-indent: 0px;
+  --leo-typography-sidebar-product-title-paragraph-spacing: 0px;
   --leo-typography-small-link-font-size: 13px;
   --leo-typography-small-link-font-weight: 400;
-  --leo-typography-small-link-letter-spacing: 0;
+  --leo-typography-small-link-letter-spacing: 0px;
   --leo-typography-small-link-line-height: 15.6px;
-  --leo-typography-small-link-paragraph-indent: 0;
-  --leo-typography-small-link-paragraph-spacing: 0;
+  --leo-typography-small-link-paragraph-indent: 0px;
+  --leo-typography-small-link-paragraph-spacing: 0px;
   --leo-typography-small-regular-font-size: 13px;
   --leo-typography-small-regular-font-weight: 400;
-  --leo-typography-small-regular-letter-spacing: 0;
+  --leo-typography-small-regular-letter-spacing: 0px;
   --leo-typography-small-regular-line-height: 15.6px;
-  --leo-typography-small-regular-paragraph-indent: 0;
-  --leo-typography-small-regular-paragraph-spacing: 0;
+  --leo-typography-small-regular-paragraph-indent: 0px;
+  --leo-typography-small-regular-paragraph-spacing: 0px;
   --leo-typography-small-semibold-font-size: 13px;
   --leo-typography-small-semibold-font-weight: 600;
-  --leo-typography-small-semibold-letter-spacing: 0;
+  --leo-typography-small-semibold-letter-spacing: 0px;
   --leo-typography-small-semibold-line-height: 15.6px;
-  --leo-typography-small-semibold-paragraph-indent: 0;
-  --leo-typography-small-semibold-paragraph-spacing: 0;
+  --leo-typography-small-semibold-paragraph-indent: 0px;
+  --leo-typography-small-semibold-paragraph-spacing: 0px;
   --leo-typography-x-small-link-font-size: 12px;
   --leo-typography-x-small-link-font-weight: 400;
-  --leo-typography-x-small-link-letter-spacing: 0;
+  --leo-typography-x-small-link-letter-spacing: 0px;
   --leo-typography-x-small-link-line-height: 14.4px;
-  --leo-typography-x-small-link-paragraph-indent: 0;
-  --leo-typography-x-small-link-paragraph-spacing: 0;
+  --leo-typography-x-small-link-paragraph-indent: 0px;
+  --leo-typography-x-small-link-paragraph-spacing: 0px;
   --leo-typography-x-small-regular-font-size: 12px;
   --leo-typography-x-small-regular-font-weight: 400;
-  --leo-typography-x-small-regular-letter-spacing: 0;
+  --leo-typography-x-small-regular-letter-spacing: 0px;
   --leo-typography-x-small-regular-line-height: 14.4px;
-  --leo-typography-x-small-regular-paragraph-indent: 0;
-  --leo-typography-x-small-regular-paragraph-spacing: 0;
+  --leo-typography-x-small-regular-paragraph-indent: 0px;
+  --leo-typography-x-small-regular-paragraph-spacing: 0px;
   --leo-typography-x-small-semibold-font-size: 12px;
   --leo-typography-x-small-semibold-font-weight: 600;
-  --leo-typography-x-small-semibold-letter-spacing: 0;
+  --leo-typography-x-small-semibold-letter-spacing: 0px;
   --leo-typography-x-small-semibold-line-height: 14.4px;
-  --leo-typography-x-small-semibold-paragraph-indent: 0;
-  --leo-typography-x-small-semibold-paragraph-spacing: 0;
+  --leo-typography-x-small-semibold-paragraph-indent: 0px;
+  --leo-typography-x-small-semibold-paragraph-spacing: 0px;
 }
 
 @media (prefers-color-scheme: light) {
Variables Diff: variables-ios.diff 
--- ./tokens/css/variables-ios.old.css	2025-04-05 01:44:08.909551567 +0000
+++ ./tokens/css/variables-ios.css	2025-04-05 01:43:37.855130015 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Apr 02 2025 20:25:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Apr 05 2025 01:43:37 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -25,102 +25,102 @@
   --leo-typography-ios-default-regular-font-weight: 400;
   --leo-typography-ios-default-regular-letter-spacing: -0.2px;
   --leo-typography-ios-default-regular-line-height: 20px;
-  --leo-typography-ios-default-regular-paragraph-indent: 0;
-  --leo-typography-ios-default-regular-paragraph-spacing: 0;
+  --leo-typography-ios-default-regular-paragraph-indent: 0px;
+  --leo-typography-ios-default-regular-paragraph-spacing: 0px;
   --leo-typography-ios-default-semibold-font-size: 15px;
   --leo-typography-ios-default-semibold-font-weight: 600;
   --leo-typography-ios-default-semibold-letter-spacing: -0.2px;
   --leo-typography-ios-default-semibold-line-height: 20px;
-  --leo-typography-ios-default-semibold-paragraph-indent: 0;
-  --leo-typography-ios-default-semibold-paragraph-spacing: 0;
+  --leo-typography-ios-default-semibold-paragraph-indent: 0px;
+  --leo-typography-ios-default-semibold-paragraph-spacing: 0px;
   --leo-typography-ios-heading-display1-font-size: 44px;
   --leo-typography-ios-heading-display1-font-weight: 500;
-  --leo-typography-ios-heading-display1-letter-spacing: 0;
+  --leo-typography-ios-heading-display1-letter-spacing: 0px;
   --leo-typography-ios-heading-display1-line-height: 52px;
-  --leo-typography-ios-heading-display1-paragraph-indent: 0;
-  --leo-typography-ios-heading-display1-paragraph-spacing: 0;
+  --leo-typography-ios-heading-display1-paragraph-indent: 0px;
+  --leo-typography-ios-heading-display1-paragraph-spacing: 0px;
   --leo-typography-ios-heading-display2-font-size: 36px;
   --leo-typography-ios-heading-display2-font-weight: 500;
-  --leo-typography-ios-heading-display2-letter-spacing: 0;
+  --leo-typography-ios-heading-display2-letter-spacing: 0px;
   --leo-typography-ios-heading-display2-line-height: 44px;
-  --leo-typography-ios-heading-display2-paragraph-indent: 0;
-  --leo-typography-ios-heading-display2-paragraph-spacing: 0;
+  --leo-typography-ios-heading-display2-paragraph-indent: 0px;
+  --leo-typography-ios-heading-display2-paragraph-spacing: 0px;
   --leo-typography-ios-heading-h1-font-size: 32px;
   --leo-typography-ios-heading-h1-font-weight: 500;
   --leo-typography-ios-heading-h1-letter-spacing: 0.37px;
   --leo-typography-ios-heading-h1-line-height: 40px;
-  --leo-typography-ios-heading-h1-paragraph-indent: 0;
-  --leo-typography-ios-heading-h1-paragraph-spacing: 0;
+  --leo-typography-ios-heading-h1-paragraph-indent: 0px;
+  --leo-typography-ios-heading-h1-paragraph-spacing: 0px;
   --leo-typography-ios-heading-h2-font-size: 28px;
   --leo-typography-ios-heading-h2-font-weight: 500;
   --leo-typography-ios-heading-h2-letter-spacing: 0.36px;
   --leo-typography-ios-heading-h2-line-height: 34px;
-  --leo-typography-ios-heading-h2-paragraph-indent: 0;
-  --leo-typography-ios-heading-h2-paragraph-spacing: 0;
+  --leo-typography-ios-heading-h2-paragraph-indent: 0px;
+  --leo-typography-ios-heading-h2-paragraph-spacing: 0px;
   --leo-typography-ios-heading-h3-font-size: 22px;
   --leo-typography-ios-heading-h3-font-weight: 500;
   --leo-typography-ios-heading-h3-letter-spacing: 0.35px;
   --leo-typography-ios-heading-h3-line-height: 28px;
-  --leo-typography-ios-heading-h3-paragraph-indent: 0;
-  --leo-typography-ios-heading-h3-paragraph-spacing: 0;
+  --leo-typography-ios-heading-h3-paragraph-indent: 0px;
+  --leo-typography-ios-heading-h3-paragraph-spacing: 0px;
   --leo-typography-ios-heading-h4-font-size: 17px;
   --leo-typography-ios-heading-h4-font-weight: 500;
   --leo-typography-ios-heading-h4-letter-spacing: -0.41px;
   --leo-typography-ios-heading-h4-line-height: 22px;
-  --leo-typography-ios-heading-h4-paragraph-indent: 0;
-  --leo-typography-ios-heading-h4-paragraph-spacing: 0;
+  --leo-typography-ios-heading-h4-paragraph-indent: 0px;
+  --leo-typography-ios-heading-h4-paragraph-spacing: 0px;
   --leo-typography-ios-large-regular-font-size: 17px;
   --leo-typography-ios-large-regular-font-weight: 400;
   --leo-typography-ios-large-regular-letter-spacing: -0.2px;
   --leo-typography-ios-large-regular-line-height: 22px;
-  --leo-typography-ios-large-regular-paragraph-indent: 0;
-  --leo-typography-ios-large-regular-paragraph-spacing: 0;
+  --leo-typography-ios-large-regular-paragraph-indent: 0px;
+  --leo-typography-ios-large-regular-paragraph-spacing: 0px;
   --leo-typography-ios-large-semibold-font-size: 17px;
   --leo-typography-ios-large-semibold-font-weight: 600;
   --leo-typography-ios-large-semibold-letter-spacing: -0.2px;
   --leo-typography-ios-large-semibold-line-height: 22px;
-  --leo-typography-ios-large-semibold-paragraph-indent: 0;
-  --leo-typography-ios-large-semibold-paragraph-spacing: 0;
+  --leo-typography-ios-large-semibold-paragraph-indent: 0px;
+  --leo-typography-ios-large-semibold-paragraph-spacing: 0px;
   --leo-typography-ios-monospace-default-font-size: 15px;
   --leo-typography-ios-monospace-default-font-weight: 400;
-  --leo-typography-ios-monospace-default-letter-spacing: 0;
+  --leo-typography-ios-monospace-default-letter-spacing: 0px;
   --leo-typography-ios-monospace-default-line-height: 20px;
-  --leo-typography-ios-monospace-default-paragraph-indent: 0;
-  --leo-typography-ios-monospace-default-paragraph-spacing: 0;
+  --leo-typography-ios-monospace-default-paragraph-indent: 0px;
+  --leo-typography-ios-monospace-default-paragraph-spacing: 0px;
   --leo-typography-ios-monospace-large-font-size: 17px;
   --leo-typography-ios-monospace-large-font-weight: 400;
-  --leo-typography-ios-monospace-large-letter-spacing: 0;
+  --leo-typography-ios-monospace-large-letter-spacing: 0px;
   --leo-typography-ios-monospace-large-line-height: 22px;
-  --leo-typography-ios-monospace-large-paragraph-indent: 0;
-  --leo-typography-ios-monospace-large-paragraph-spacing: 0;
+  --leo-typography-ios-monospace-large-paragraph-indent: 0px;
+  --leo-typography-ios-monospace-large-paragraph-spacing: 0px;
   --leo-typography-ios-monospace-small-font-size: 13px;
   --leo-typography-ios-monospace-small-font-weight: 400;
-  --leo-typography-ios-monospace-small-letter-spacing: 0;
+  --leo-typography-ios-monospace-small-letter-spacing: 0px;
   --leo-typography-ios-monospace-small-line-height: 18px;
-  --leo-typography-ios-monospace-small-paragraph-indent: 0;
-  --leo-typography-ios-monospace-small-paragraph-spacing: 0;
+  --leo-typography-ios-monospace-small-paragraph-indent: 0px;
+  --leo-typography-ios-monospace-small-paragraph-spacing: 0px;
   --leo-typography-ios-small-regular-font-size: 13px;
   --leo-typography-ios-small-regular-font-weight: 400;
   --leo-typography-ios-small-regular-letter-spacing: -0.2px;
   --leo-typography-ios-small-regular-line-height: 18px;
-  --leo-typography-ios-small-regular-paragraph-indent: 0;
-  --leo-typography-ios-small-regular-paragraph-spacing: 0;
+  --leo-typography-ios-small-regular-paragraph-indent: 0px;
+  --leo-typography-ios-small-regular-paragraph-spacing: 0px;
   --leo-typography-ios-small-semibold-font-size: 13px;
   --leo-typography-ios-small-semibold-font-weight: 600;
   --leo-typography-ios-small-semibold-letter-spacing: -0.2px;
   --leo-typography-ios-small-semibold-line-height: 18px;
-  --leo-typography-ios-small-semibold-paragraph-indent: 0;
-  --leo-typography-ios-small-semibold-paragraph-spacing: 0;
+  --leo-typography-ios-small-semibold-paragraph-indent: 0px;
+  --leo-typography-ios-small-semibold-paragraph-spacing: 0px;
   --leo-typography-ios-x-small-regular-font-size: 11px;
   --leo-typography-ios-x-small-regular-font-weight: 400;
   --leo-typography-ios-x-small-regular-letter-spacing: 0.07px;
   --leo-typography-ios-x-small-regular-line-height: 13px;
-  --leo-typography-ios-x-small-regular-paragraph-indent: 0;
-  --leo-typography-ios-x-small-regular-paragraph-spacing: 0;
+  --leo-typography-ios-x-small-regular-paragraph-indent: 0px;
+  --leo-typography-ios-x-small-regular-paragraph-spacing: 0px;
   --leo-typography-ios-x-small-semibold-font-size: 11px;
   --leo-typography-ios-x-small-semibold-font-weight: 600;
   --leo-typography-ios-x-small-semibold-letter-spacing: 0.07px;
   --leo-typography-ios-x-small-semibold-line-height: 13px;
-  --leo-typography-ios-x-small-semibold-paragraph-indent: 0;
-  --leo-typography-ios-x-small-semibold-paragraph-spacing: 0;
+  --leo-typography-ios-x-small-semibold-paragraph-indent: 0px;
+  --leo-typography-ios-x-small-semibold-paragraph-spacing: 0px;
 }
Variables Diff: variables-marketing.diff 
--- ./tokens/css/variables-marketing.old.css	2025-04-05 01:44:09.167555007 +0000
+++ ./tokens/css/variables-marketing.css	2025-04-05 01:43:38.364136855 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Apr 02 2025 20:25:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Apr 05 2025 01:43:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -38,182 +38,182 @@
   --leo-typography-desktop-primary-blockquote-font-weight: 600;
   --leo-typography-desktop-primary-blockquote-letter-spacing: -0.4px;
   --leo-typography-desktop-primary-blockquote-line-height: 30px;
-  --leo-typography-desktop-primary-blockquote-paragraph-indent: 0;
-  --leo-typography-desktop-primary-blockquote-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-blockquote-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-blockquote-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-h1-font-size: 80px;
   --leo-typography-desktop-primary-h1-font-weight: 600;
   --leo-typography-desktop-primary-h1-letter-spacing: -3.2px;
   --leo-typography-desktop-primary-h1-line-height: 100px;
-  --leo-typography-desktop-primary-h1-paragraph-indent: 0;
-  --leo-typography-desktop-primary-h1-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-h1-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-h1-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-h2-font-size: 70px;
   --leo-typography-desktop-primary-h2-font-weight: 600;
   --leo-typography-desktop-primary-h2-letter-spacing: -2.8px;
   --leo-typography-desktop-primary-h2-line-height: 90px;
-  --leo-typography-desktop-primary-h2-paragraph-indent: 0;
-  --leo-typography-desktop-primary-h2-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-h2-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-h2-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-h3-font-size: 40px;
   --leo-typography-desktop-primary-h3-font-weight: 600;
   --leo-typography-desktop-primary-h3-letter-spacing: -1.6px;
   --leo-typography-desktop-primary-h3-line-height: 44px;
-  --leo-typography-desktop-primary-h3-paragraph-indent: 0;
-  --leo-typography-desktop-primary-h3-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-h3-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-h3-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-h4-font-size: 30px;
   --leo-typography-desktop-primary-h4-font-weight: 600;
   --leo-typography-desktop-primary-h4-letter-spacing: -1.2px;
   --leo-typography-desktop-primary-h4-line-height: 40px;
-  --leo-typography-desktop-primary-h4-paragraph-indent: 0;
-  --leo-typography-desktop-primary-h4-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-h4-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-h4-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-h5-font-size: 24px;
   --leo-typography-desktop-primary-h5-font-weight: 600;
   --leo-typography-desktop-primary-h5-letter-spacing: -0.48px;
   --leo-typography-desktop-primary-h5-line-height: 30px;
-  --leo-typography-desktop-primary-h5-paragraph-indent: 0;
-  --leo-typography-desktop-primary-h5-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-h5-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-h5-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-hero-font-size: 120px;
   --leo-typography-desktop-primary-hero-font-weight: 600;
   --leo-typography-desktop-primary-hero-letter-spacing: -4.8px;
   --leo-typography-desktop-primary-hero-line-height: 130px;
-  --leo-typography-desktop-primary-hero-paragraph-indent: 0;
-  --leo-typography-desktop-primary-hero-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-hero-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-hero-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-text-default-font-size: 20px;
   --leo-typography-desktop-primary-text-default-font-weight: 400;
-  --leo-typography-desktop-primary-text-default-letter-spacing: 0;
+  --leo-typography-desktop-primary-text-default-letter-spacing: 0px;
   --leo-typography-desktop-primary-text-default-line-height: 30px;
-  --leo-typography-desktop-primary-text-default-paragraph-indent: 0;
-  --leo-typography-desktop-primary-text-default-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-text-default-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-text-default-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-text-small-font-size: 15px;
   --leo-typography-desktop-primary-text-small-font-weight: 700;
   --leo-typography-desktop-primary-text-small-letter-spacing: -0.45px;
   --leo-typography-desktop-primary-text-small-line-height: 20px;
-  --leo-typography-desktop-primary-text-small-paragraph-indent: 0;
-  --leo-typography-desktop-primary-text-small-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-text-small-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-text-small-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-h1-font-size: 100px;
   --leo-typography-desktop-secondary-h1-font-weight: 500;
   --leo-typography-desktop-secondary-h1-letter-spacing: -2px;
   --leo-typography-desktop-secondary-h1-line-height: 95px;
-  --leo-typography-desktop-secondary-h1-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-h1-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-h1-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-h1-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-h2-font-size: 80px;
   --leo-typography-desktop-secondary-h2-font-weight: 500;
   --leo-typography-desktop-secondary-h2-letter-spacing: -1.6px;
   --leo-typography-desktop-secondary-h2-line-height: 75px;
-  --leo-typography-desktop-secondary-h2-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-h2-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-h2-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-h2-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-h3-font-size: 70px;
   --leo-typography-desktop-secondary-h3-font-weight: 500;
   --leo-typography-desktop-secondary-h3-letter-spacing: -1.4px;
   --leo-typography-desktop-secondary-h3-line-height: 75px;
-  --leo-typography-desktop-secondary-h3-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-h3-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-h3-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-h3-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-h4-font-size: 40px;
   --leo-typography-desktop-secondary-h4-font-weight: 500;
   --leo-typography-desktop-secondary-h4-letter-spacing: -0.8px;
   --leo-typography-desktop-secondary-h4-line-height: 45px;
-  --leo-typography-desktop-secondary-h4-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-h4-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-h4-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-h4-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-h5-font-size: 30px;
   --leo-typography-desktop-secondary-h5-font-weight: 500;
   --leo-typography-desktop-secondary-h5-letter-spacing: -0.6px;
   --leo-typography-desktop-secondary-h5-line-height: 40px;
-  --leo-typography-desktop-secondary-h5-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-h5-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-h5-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-h5-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-hero-font-size: 120px;
   --leo-typography-desktop-secondary-hero-font-weight: 500;
   --leo-typography-desktop-secondary-hero-letter-spacing: -2.4px;
   --leo-typography-desktop-secondary-hero-line-height: 103px;
-  --leo-typography-desktop-secondary-hero-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-hero-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-hero-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-hero-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-blockquote-font-size: 20px;
   --leo-typography-mobile-primary-blockquote-font-weight: 600;
   --leo-typography-mobile-primary-blockquote-letter-spacing: -0.4px;
   --leo-typography-mobile-primary-blockquote-line-height: 28px;
-  --leo-typography-mobile-primary-blockquote-paragraph-indent: 0;
-  --leo-typography-mobile-primary-blockquote-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-blockquote-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-blockquote-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-h1-font-size: 36px;
   --leo-typography-mobile-primary-h1-font-weight: 600;
   --leo-typography-mobile-primary-h1-letter-spacing: -1.44px;
   --leo-typography-mobile-primary-h1-line-height: 45px;
-  --leo-typography-mobile-primary-h1-paragraph-indent: 0;
-  --leo-typography-mobile-primary-h1-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-h1-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-h1-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-h2-font-size: 30px;
   --leo-typography-mobile-primary-h2-font-weight: 600;
   --leo-typography-mobile-primary-h2-letter-spacing: -1.2px;
   --leo-typography-mobile-primary-h2-line-height: 40px;
-  --leo-typography-mobile-primary-h2-paragraph-indent: 0;
-  --leo-typography-mobile-primary-h2-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-h2-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-h2-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-h3-font-size: 24px;
   --leo-typography-mobile-primary-h3-font-weight: 600;
   --leo-typography-mobile-primary-h3-letter-spacing: -0.96px;
   --leo-typography-mobile-primary-h3-line-height: 35px;
-  --leo-typography-mobile-primary-h3-paragraph-indent: 0;
-  --leo-typography-mobile-primary-h3-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-h3-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-h3-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-h4-font-size: 20px;
   --leo-typography-mobile-primary-h4-font-weight: 600;
   --leo-typography-mobile-primary-h4-letter-spacing: -0.8px;
   --leo-typography-mobile-primary-h4-line-height: 25px;
-  --leo-typography-mobile-primary-h4-paragraph-indent: 0;
-  --leo-typography-mobile-primary-h4-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-h4-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-h4-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-h5-font-size: 18px;
   --leo-typography-mobile-primary-h5-font-weight: 600;
   --leo-typography-mobile-primary-h5-letter-spacing: -0.72px;
   --leo-typography-mobile-primary-h5-line-height: 20px;
-  --leo-typography-mobile-primary-h5-paragraph-indent: 0;
-  --leo-typography-mobile-primary-h5-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-h5-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-h5-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-hero-font-size: 54px;
   --leo-typography-mobile-primary-hero-font-weight: 600;
   --leo-typography-mobile-primary-hero-letter-spacing: -2.16px;
   --leo-typography-mobile-primary-hero-line-height: 65px;
-  --leo-typography-mobile-primary-hero-paragraph-indent: 0;
-  --leo-typography-mobile-primary-hero-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-hero-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-hero-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-text-default-font-size: 18px;
   --leo-typography-mobile-primary-text-default-font-weight: 400;
-  --leo-typography-mobile-primary-text-default-letter-spacing: 0;
+  --leo-typography-mobile-primary-text-default-letter-spacing: 0px;
   --leo-typography-mobile-primary-text-default-line-height: 28px;
-  --leo-typography-mobile-primary-text-default-paragraph-indent: 0;
-  --leo-typography-mobile-primary-text-default-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-text-default-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-text-default-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-text-small-font-size: 15px;
   --leo-typography-mobile-primary-text-small-font-weight: 700;
-  --leo-typography-mobile-primary-text-small-letter-spacing: 0;
+  --leo-typography-mobile-primary-text-small-letter-spacing: 0px;
   --leo-typography-mobile-primary-text-small-line-height: 20px;
-  --leo-typography-mobile-primary-text-small-paragraph-indent: 0;
-  --leo-typography-mobile-primary-text-small-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-text-small-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-text-small-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-h1-font-size: 40px;
   --leo-typography-mobile-secondary-h1-font-weight: 500;
   --leo-typography-mobile-secondary-h1-letter-spacing: -0.8px;
   --leo-typography-mobile-secondary-h1-line-height: 45px;
-  --leo-typography-mobile-secondary-h1-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-h1-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-h1-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-h1-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-h2-font-size: 36px;
   --leo-typography-mobile-secondary-h2-font-weight: 500;
   --leo-typography-mobile-secondary-h2-letter-spacing: -0.72px;
   --leo-typography-mobile-secondary-h2-line-height: 40px;
-  --leo-typography-mobile-secondary-h2-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-h2-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-h2-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-h2-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-h3-font-size: 30px;
   --leo-typography-mobile-secondary-h3-font-weight: 500;
   --leo-typography-mobile-secondary-h3-letter-spacing: -0.6px;
   --leo-typography-mobile-secondary-h3-line-height: 30px;
-  --leo-typography-mobile-secondary-h3-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-h3-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-h3-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-h3-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-h4-font-size: 24px;
   --leo-typography-mobile-secondary-h4-font-weight: 500;
   --leo-typography-mobile-secondary-h4-letter-spacing: -0.48px;
   --leo-typography-mobile-secondary-h4-line-height: 30px;
-  --leo-typography-mobile-secondary-h4-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-h4-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-h4-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-h4-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-h5-font-size: 20px;
   --leo-typography-mobile-secondary-h5-font-weight: 500;
   --leo-typography-mobile-secondary-h5-letter-spacing: -0.4px;
   --leo-typography-mobile-secondary-h5-line-height: 25px;
-  --leo-typography-mobile-secondary-h5-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-h5-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-h5-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-h5-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-hero-font-size: 54px;
   --leo-typography-mobile-secondary-hero-font-weight: 500;
   --leo-typography-mobile-secondary-hero-letter-spacing: -1.08px;
   --leo-typography-mobile-secondary-hero-line-height: 50px;
-  --leo-typography-mobile-secondary-hero-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-hero-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-hero-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-hero-paragraph-spacing: 0px;
 }
 
 @media (prefers-color-scheme: light) {
Variables Diff: variables-news.diff 
--- ./tokens/css/variables-news.old.css	2025-04-05 01:44:09.302556808 +0000
+++ ./tokens/css/variables-news.css	2025-04-05 01:43:39.308149541 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Apr 02 2025 20:25:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Apr 05 2025 01:43:39 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
Variables Diff: variables-newtab.diff 
--- ./tokens/css/variables-newtab.old.css	2025-04-05 01:44:09.624561102 +0000
+++ ./tokens/css/variables-newtab.css	2025-04-05 01:43:39.759155602 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Apr 02 2025 20:25:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Apr 05 2025 01:43:39 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -11,26 +11,26 @@
   --leo-gradient-ntp-overlay: linear-gradient(359.99997954866785deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.5) 100%);
   --leo-typography-brave-rewards-widget-progress-font-size: 24px;
   --leo-typography-brave-rewards-widget-progress-font-weight: 400;
-  --leo-typography-brave-rewards-widget-progress-letter-spacing: 0;
+  --leo-typography-brave-rewards-widget-progress-letter-spacing: 0px;
   --leo-typography-brave-rewards-widget-progress-line-height: 24px;
-  --leo-typography-brave-rewards-widget-progress-paragraph-indent: 0;
-  --leo-typography-brave-rewards-widget-progress-paragraph-spacing: 0;
+  --leo-typography-brave-rewards-widget-progress-paragraph-indent: 0px;
+  --leo-typography-brave-rewards-widget-progress-paragraph-spacing: 0px;
   --leo-typography-brave-rewards-widget-token-balance-font-size: 36px;
   --leo-typography-brave-rewards-widget-token-balance-font-weight: 400;
-  --leo-typography-brave-rewards-widget-token-balance-letter-spacing: 0;
+  --leo-typography-brave-rewards-widget-token-balance-letter-spacing: 0px;
   --leo-typography-brave-rewards-widget-token-balance-line-height: 36px;
-  --leo-typography-brave-rewards-widget-token-balance-paragraph-indent: 0;
-  --leo-typography-brave-rewards-widget-token-balance-paragraph-spacing: 0;
+  --leo-typography-brave-rewards-widget-token-balance-paragraph-indent: 0px;
+  --leo-typography-brave-rewards-widget-token-balance-paragraph-spacing: 0px;
   --leo-typography-stats-h2-font-size: 40px;
   --leo-typography-stats-h2-font-weight: 400;
-  --leo-typography-stats-h2-letter-spacing: 0;
+  --leo-typography-stats-h2-letter-spacing: 0px;
   --leo-typography-stats-h2-line-height: 40px;
-  --leo-typography-stats-h2-paragraph-indent: 0;
-  --leo-typography-stats-h2-paragraph-spacing: 0;
+  --leo-typography-stats-h2-paragraph-indent: 0px;
+  --leo-typography-stats-h2-paragraph-spacing: 0px;
   --leo-typography-stats-h3-font-size: 20px;
   --leo-typography-stats-h3-font-weight: 500;
-  --leo-typography-stats-h3-letter-spacing: 0;
+  --leo-typography-stats-h3-letter-spacing: 0px;
   --leo-typography-stats-h3-line-height: 24px;
-  --leo-typography-stats-h3-paragraph-indent: 0;
-  --leo-typography-stats-h3-paragraph-spacing: 0;
+  --leo-typography-stats-h3-paragraph-indent: 0px;
+  --leo-typography-stats-h3-paragraph-spacing: 0px;
 }
Variables Diff: variables-search.diff 
--- ./tokens/css/variables-search.old.css	2025-04-05 01:44:09.913564955 +0000
+++ ./tokens/css/variables-search.css	2025-04-05 01:43:38.856143467 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Apr 02 2025 20:25:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Apr 05 2025 01:43:38 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -14,32 +14,32 @@
   --leo-gradient-search-navigation: linear-gradient(307.16553222317134deg, rgb(191, 20, 162) 0%, rgb(247, 58, 28) 100%);
   --leo-typography-heading-h5-font-size: 20px;
   --leo-typography-heading-h5-font-weight: 600;
-  --leo-typography-heading-h5-letter-spacing: 0;
+  --leo-typography-heading-h5-letter-spacing: 0px;
   --leo-typography-heading-h5-line-height: 26px;
-  --leo-typography-heading-h5-paragraph-indent: 0;
-  --leo-typography-heading-h5-paragraph-spacing: 0;
+  --leo-typography-heading-h5-paragraph-indent: 0px;
+  --leo-typography-heading-h5-paragraph-spacing: 0px;
   --leo-typography-heading-serpresult-font-size: 18px;
   --leo-typography-heading-serpresult-font-weight: 400;
-  --leo-typography-heading-serpresult-letter-spacing: 0;
+  --leo-typography-heading-serpresult-letter-spacing: 0px;
   --leo-typography-heading-serpresult-line-height: 26px;
-  --leo-typography-heading-serpresult-paragraph-indent: 0;
-  --leo-typography-heading-serpresult-paragraph-spacing: 0;
+  --leo-typography-heading-serpresult-paragraph-indent: 0px;
+  --leo-typography-heading-serpresult-paragraph-spacing: 0px;
   --leo-typography-text-small-bold-font-size: 13px;
   --leo-typography-text-small-bold-font-weight: 600;
   --leo-typography-text-small-bold-letter-spacing: -0.2px;
   --leo-typography-text-small-bold-line-height: 21px;
-  --leo-typography-text-small-bold-paragraph-indent: 0;
-  --leo-typography-text-small-bold-paragraph-spacing: 0;
+  --leo-typography-text-small-bold-paragraph-indent: 0px;
+  --leo-typography-text-small-bold-paragraph-spacing: 0px;
   --leo-typography-text-small-link-font-size: 13px;
   --leo-typography-text-small-link-font-weight: 600;
   --leo-typography-text-small-link-letter-spacing: -0.2px;
   --leo-typography-text-small-link-line-height: 21px;
-  --leo-typography-text-small-link-paragraph-indent: 0;
-  --leo-typography-text-small-link-paragraph-spacing: 0;
+  --leo-typography-text-small-link-paragraph-indent: 0px;
+  --leo-typography-text-small-link-paragraph-spacing: 0px;
   --leo-typography-text-small-regular-font-size: 13px;
   --leo-typography-text-small-regular-font-weight: 400;
   --leo-typography-text-small-regular-letter-spacing: -0.2px;
   --leo-typography-text-small-regular-line-height: 21px;
-  --leo-typography-text-small-regular-paragraph-indent: 0;
-  --leo-typography-text-small-regular-paragraph-spacing: 0;
+  --leo-typography-text-small-regular-paragraph-indent: 0px;
+  --leo-typography-text-small-regular-paragraph-spacing: 0px;
 }
Variables Diff: variables-web3.diff 
--- ./tokens/css/variables-web3.old.css	2025-04-05 01:44:10.209568902 +0000
+++ ./tokens/css/variables-web3.css	2025-04-05 01:43:40.219161784 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Apr 02 2025 20:25:08 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Apr 05 2025 01:43:40 GMT+0000 (Coordinated Universal Time)
  */
 
 @media (prefers-color-scheme: light) {
Variables Diff: variables.diff 
--- ./tokens/css/variables.old.css	2025-04-05 01:44:10.742576011 +0000
+++ ./tokens/css/variables.css	2025-04-05 01:43:34.790088825 +0000
@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Wed Apr 02 2025 20:25:07 GMT+0000 (Coordinated Universal Time)
+ * Generated on Sat Apr 05 2025 01:43:34 GMT+0000 (Coordinated Universal Time)
  */
 
 :root {
@@ -432,112 +432,112 @@
   --leo-typography-android-size-x-small: 11px;
   --leo-typography-components-button-default-font-size: 14px;
   --leo-typography-components-button-default-font-weight: 600;
-  --leo-typography-components-button-default-letter-spacing: 0;
+  --leo-typography-components-button-default-letter-spacing: 0px;
   --leo-typography-components-button-default-line-height: 20px;
-  --leo-typography-components-button-default-paragraph-indent: 0;
-  --leo-typography-components-button-default-paragraph-spacing: 0;
+  --leo-typography-components-button-default-paragraph-indent: 0px;
+  --leo-typography-components-button-default-paragraph-spacing: 0px;
   --leo-typography-components-button-jumbo-font-size: 18px;
   --leo-typography-components-button-jumbo-font-weight: 600;
-  --leo-typography-components-button-jumbo-letter-spacing: 0;
+  --leo-typography-components-button-jumbo-letter-spacing: 0px;
   --leo-typography-components-button-jumbo-line-height: 24px;
-  --leo-typography-components-button-jumbo-paragraph-indent: 0;
-  --leo-typography-components-button-jumbo-paragraph-spacing: 0;
+  --leo-typography-components-button-jumbo-paragraph-indent: 0px;
+  --leo-typography-components-button-jumbo-paragraph-spacing: 0px;
   --leo-typography-components-button-large-font-size: 16px;
   --leo-typography-components-button-large-font-weight: 600;
-  --leo-typography-components-button-large-letter-spacing: 0;
+  --leo-typography-components-button-large-letter-spacing: 0px;
   --leo-typography-components-button-large-line-height: 22px;
-  --leo-typography-components-button-large-paragraph-indent: 0;
-  --leo-typography-components-button-large-paragraph-spacing: 0;
+  --leo-typography-components-button-large-paragraph-indent: 0px;
+  --leo-typography-components-button-large-paragraph-spacing: 0px;
   --leo-typography-components-button-small-font-size: 12px;
   --leo-typography-components-button-small-font-weight: 600;
-  --leo-typography-components-button-small-letter-spacing: 0;
+  --leo-typography-components-button-small-letter-spacing: 0px;
   --leo-typography-components-button-small-line-height: 18px;
-  --leo-typography-components-button-small-paragraph-indent: 0;
-  --leo-typography-components-button-small-paragraph-spacing: 0;
+  --leo-typography-components-button-small-paragraph-indent: 0px;
+  --leo-typography-components-button-small-paragraph-spacing: 0px;
   --leo-typography-components-label-font-size: 10px;
   --leo-typography-components-label-font-weight: 700;
-  --leo-typography-components-label-letter-spacing: 0;
+  --leo-typography-components-label-letter-spacing: 0px;
   --leo-typography-components-label-line-height: 10px;
-  --leo-typography-components-label-paragraph-indent: 0;
-  --leo-typography-components-label-paragraph-spacing: 0;
+  --leo-typography-components-label-paragraph-indent: 0px;
+  --leo-typography-components-label-paragraph-spacing: 0px;
   --leo-typography-components-navbutton-font-size: 14px;
   --leo-typography-components-navbutton-font-weight: 600;
-  --leo-typography-components-navbutton-letter-spacing: 0;
+  --leo-typography-components-navbutton-letter-spacing: 0px;
   --leo-typography-components-navbutton-line-height: 22px;
-  --leo-typography-components-navbutton-paragraph-indent: 0;
-  --leo-typography-components-navbutton-paragraph-spacing: 0;
+  --leo-typography-components-navbutton-paragraph-indent: 0px;
+  --leo-typography-components-navbutton-paragraph-spacing: 0px;
   --leo-typography-components-numbers-large-font-size: 36px;
   --leo-typography-components-numbers-large-font-weight: 600;
   --leo-typography-components-numbers-large-letter-spacing: -0.72px;
   --leo-typography-components-numbers-large-line-height: 46px;
-  --leo-typography-components-numbers-large-paragraph-indent: 0;
-  --leo-typography-components-numbers-large-paragraph-spacing: 0;
+  --leo-typography-components-numbers-large-paragraph-indent: 0px;
+  --leo-typography-components-numbers-large-paragraph-spacing: 0px;
   --leo-typography-components-tableheader-font-size: 13px;
   --leo-typography-components-tableheader-font-weight: 600;
-  --leo-typography-components-tableheader-letter-spacing: 0;
+  --leo-typography-components-tableheader-letter-spacing: 0px;
   --leo-typography-components-tableheader-line-height: 16px;
-  --leo-typography-components-tableheader-paragraph-indent: 0;
-  --leo-typography-components-tableheader-paragraph-spacing: 0;
+  --leo-typography-components-tableheader-paragraph-indent: 0px;
+  --leo-typography-components-tableheader-paragraph-spacing: 0px;
   --leo-typography-default-link-font-size: 14px;
   --leo-typography-default-link-font-weight: 400;
-  --leo-typography-default-link-letter-spacing: 0;
+  --leo-typography-default-link-letter-spacing: 0px;
   --leo-typography-default-link-line-height: 22px;
-  --leo-typography-default-link-paragraph-indent: 0;
+  --leo-typography-default-link-paragraph-indent: 0px;
   --leo-typography-default-link-paragraph-spacing: 8px;
   --leo-typography-default-regular-font-size: 14px;
   --leo-typography-default-regular-font-weight: 400;
-  --leo-typography-default-regular-letter-spacing: 0;
+  --leo-typography-default-regular-letter-spacing: 0px;
   --leo-typography-default-regular-line-height: 22px;
-  --leo-typography-default-regular-paragraph-indent: 0;
+  --leo-typography-default-regular-paragraph-indent: 0px;
   --leo-typography-default-regular-paragraph-spacing: 8px;
   --leo-typography-default-semibold-font-size: 14px;
   --leo-typography-default-semibold-font-weight: 600;
-  --leo-typography-default-semibold-letter-spacing: 0;
+  --leo-typography-default-semibold-letter-spacing: 0px;
   --leo-typography-default-semibold-line-height: 22px;
-  --leo-typography-default-semibold-paragraph-indent: 0;
+  --leo-typography-default-semibold-paragraph-indent: 0px;
   --leo-typography-default-semibold-paragraph-spacing: 8px;
   --leo-typography-heading-display1-font-size: 46px;
   --leo-typography-heading-display1-font-weight: 600;
   --leo-typography-heading-display1-letter-spacing: -0.5px;
   --leo-typography-heading-display1-line-height: 54px;
-  --leo-typography-heading-display1-paragraph-indent: 0;
-  --leo-typography-heading-display1-paragraph-spacing: 0;
+  --leo-typography-heading-display1-paragraph-indent: 0px;
+  --leo-typography-heading-display1-paragraph-spacing: 0px;
   --leo-typography-heading-display2-font-size: 40px;
   --leo-typography-heading-display2-font-weight: 600;
   --leo-typography-heading-display2-letter-spacing: -0.5px;
   --leo-typography-heading-display2-line-height: 48px;
-  --leo-typography-heading-display2-paragraph-indent: 0;
-  --leo-typography-heading-display2-paragraph-spacing: 0;
+  --leo-typography-heading-display2-paragraph-indent: 0px;
+  --leo-typography-heading-display2-paragraph-spacing: 0px;
   --leo-typography-heading-display3-font-size: 34px;
   --leo-typography-heading-display3-font-weight: 600;
   --leo-typography-heading-display3-letter-spacing: -0.5px;
   --leo-typography-heading-display3-line-height: 40px;
-  --leo-typography-heading-display3-paragraph-indent: 0;
-  --leo-typography-heading-display3-paragraph-spacing: 0;
+  --leo-typography-heading-display3-paragraph-indent: 0px;
+  --leo-typography-heading-display3-paragraph-spacing: 0px;
   --leo-typography-heading-h1-font-size: 32px;
   --leo-typography-heading-h1-font-weight: 600;
   --leo-typography-heading-h1-letter-spacing: -0.5px;
   --leo-typography-heading-h1-line-height: 42px;
-  --leo-typography-heading-h1-paragraph-indent: 0;
-  --leo-typography-heading-h1-paragraph-spacing: 0;
+  --leo-typography-heading-h1-paragraph-indent: 0px;
+  --leo-typography-heading-h1-paragraph-spacing: 0px;
   --leo-typography-heading-h2-font-size: 28px;
   --leo-typography-heading-h2-font-weight: 600;
   --leo-typography-heading-h2-letter-spacing: -0.5px;
   --leo-typography-heading-h2-line-height: 36px;
-  --leo-typography-heading-h2-paragraph-indent: 0;
-  --leo-typography-heading-h2-paragraph-spacing: 0;
+  --leo-typography-heading-h2-paragraph-indent: 0px;
+  --leo-typography-heading-h2-paragraph-spacing: 0px;
   --leo-typography-heading-h3-font-size: 22px;
   --leo-typography-heading-h3-font-weight: 600;
   --leo-typography-heading-h3-letter-spacing: -0.5px;
   --leo-typography-heading-h3-line-height: 28px;
-  --leo-typography-heading-h3-paragraph-indent: 0;
-  --leo-typography-heading-h3-paragraph-spacing: 0;
+  --leo-typography-heading-h3-paragraph-indent: 0px;
+  --leo-typography-heading-h3-paragraph-spacing: 0px;
   --leo-typography-heading-h4-font-size: 16px;
   --leo-typography-heading-h4-font-weight: 600;
-  --leo-typography-heading-h4-letter-spacing: 0;
+  --leo-typography-heading-h4-letter-spacing: 0px;
   --leo-typography-heading-h4-line-height: 26px;
-  --leo-typography-heading-h4-paragraph-indent: 0;
-  --leo-typography-heading-h4-paragraph-spacing: 0;
+  --leo-typography-heading-h4-paragraph-indent: 0px;
+  --leo-typography-heading-h4-paragraph-spacing: 0px;
   --leo-typography-ios-letter-spacing-button: -0.4000000059604645px;
   --leo-typography-ios-letter-spacing-default: -0.23000000417232513px;
   --leo-typography-ios-letter-spacing-headings: -0.25999999046325684px;
@@ -584,21 +584,21 @@
   --leo-typography-ios-size-x-small: 11px;
   --leo-typography-large-link-font-size: 16px;
   --leo-typography-large-link-font-weight: 400;
-  --leo-typography-large-link-letter-spacing: 0;
+  --leo-typography-large-link-letter-spacing: 0px;
   --leo-typography-large-link-line-height: 24px;
-  --leo-typography-large-link-paragraph-indent: 0;
+  --leo-typography-large-link-paragraph-indent: 0px;
   --leo-typography-large-link-paragraph-spacing: 8px;
   --leo-typography-large-regular-font-size: 16px;
   --leo-typography-large-regular-font-weight: 400;
-  --leo-typography-large-regular-letter-spacing: 0;
+  --leo-typography-large-regular-letter-spacing: 0px;
   --leo-typography-large-regular-line-height: 24px;
-  --leo-typography-large-regular-paragraph-indent: 0;
+  --leo-typography-large-regular-paragraph-indent: 0px;
   --leo-typography-large-regular-paragraph-spacing: 8px;
   --leo-typography-large-semibold-font-size: 16px;
   --leo-typography-large-semibold-font-weight: 600;
-  --leo-typography-large-semibold-letter-spacing: 0;
+  --leo-typography-large-semibold-letter-spacing: 0px;
   --leo-typography-large-semibold-line-height: 24px;
-  --leo-typography-large-semibold-paragraph-indent: 0;
+  --leo-typography-large-semibold-paragraph-indent: 0px;
   --leo-typography-large-semibold-paragraph-spacing: 8px;
   --leo-typography-letter-spacing-button: 0px;
   --leo-typography-letter-spacing-default: 0px;
@@ -670,22 +670,22 @@
   --leo-typography-mobile-size-x-small: 11px;
   --leo-typography-monospace-default-font-size: 14px;
   --leo-typography-monospace-default-font-weight: 400;
-  --leo-typography-monospace-default-letter-spacing: 0;
+  --leo-typography-monospace-default-letter-spacing: 0px;
   --leo-typography-monospace-default-line-height: 22px;
-  --leo-typography-monospace-default-paragraph-indent: 0;
-  --leo-typography-monospace-default-paragraph-spacing: 0;
+  --leo-typography-monospace-default-paragraph-indent: 0px;
+  --leo-typography-monospace-default-paragraph-spacing: 0px;
   --leo-typography-monospace-large-font-size: 16px;
   --leo-typography-monospace-large-font-weight: 400;
-  --leo-typography-monospace-large-letter-spacing: 0;
+  --leo-typography-monospace-large-letter-spacing: 0px;
   --leo-typography-monospace-large-line-height: 24px;
-  --leo-typography-monospace-large-paragraph-indent: 0;
-  --leo-typography-monospace-large-paragraph-spacing: 0;
+  --leo-typography-monospace-large-paragraph-indent: 0px;
+  --leo-typography-monospace-large-paragraph-spacing: 0px;
   --leo-typography-monospace-small-font-size: 12px;
   --leo-typography-monospace-small-font-weight: 400;
-  --leo-typography-monospace-small-letter-spacing: 0;
+  --leo-typography-monospace-small-letter-spacing: 0px;
   --leo-typography-monospace-small-line-height: 18px;
-  --leo-typography-monospace-small-paragraph-indent: 0;
-  --leo-typography-monospace-small-paragraph-spacing: 0;
+  --leo-typography-monospace-small-paragraph-indent: 0px;
+  --leo-typography-monospace-small-paragraph-spacing: 0px;
   --leo-typography-paragraph-spacing-default: 8px;
   --leo-typography-size-button-default: 14px;
   --leo-typography-size-button-jumbo: 18px;
@@ -708,39 +708,39 @@
   --leo-typography-size-x-small: 11px;
   --leo-typography-small-link-font-size: 12px;
   --leo-typography-small-link-font-weight: 400;
-  --leo-typography-small-link-letter-spacing: 0;
+  --leo-typography-small-link-letter-spacing: 0px;
   --leo-typography-small-link-line-height: 18px;
-  --leo-typography-small-link-paragraph-indent: 0;
+  --leo-typography-small-link-paragraph-indent: 0px;
   --leo-typography-small-link-paragraph-spacing: 8px;
   --leo-typography-small-regular-font-size: 12px;
   --leo-typography-small-regular-font-weight: 400;
-  --leo-typography-small-regular-letter-spacing: 0;
+  --leo-typography-small-regular-letter-spacing: 0px;
   --leo-typography-small-regular-line-height: 18px;
-  --leo-typography-small-regular-paragraph-indent: 0;
+  --leo-typography-small-regular-paragraph-indent: 0px;
   --leo-typography-small-regular-paragraph-spacing: 8px;
   --leo-typography-small-semibold-font-size: 12px;
   --leo-typography-small-semibold-font-weight: 600;
-  --leo-typography-small-semibold-letter-spacing: 0;
+  --leo-typography-small-semibold-letter-spacing: 0px;
   --leo-typography-small-semibold-line-height: 18px;
-  --leo-typography-small-semibold-paragraph-indent: 0;
+  --leo-typography-small-semibold-paragraph-indent: 0px;
   --leo-typography-small-semibold-paragraph-spacing: 8px;
   --leo-typography-x-small-link-font-size: 11px;
   --leo-typography-x-small-link-font-weight: 400;
-  --leo-typography-x-small-link-letter-spacing: 0;
+  --leo-typography-x-small-link-letter-spacing: 0px;
   --leo-typography-x-small-link-line-height: 16px;
-  --leo-typography-x-small-link-paragraph-indent: 0;
+  --leo-typography-x-small-link-paragraph-indent: 0px;
   --leo-typography-x-small-link-paragraph-spacing: 8px;
   --leo-typography-x-small-regular-font-size: 11px;
   --leo-typography-x-small-regular-font-weight: 400;
-  --leo-typography-x-small-regular-letter-spacing: 0;
+  --leo-typography-x-small-regular-letter-spacing: 0px;
   --leo-typography-x-small-regular-line-height: 16px;
-  --leo-typography-x-small-regular-paragraph-indent: 0;
+  --leo-typography-x-small-regular-paragraph-indent: 0px;
   --leo-typography-x-small-regular-paragraph-spacing: 8px;
   --leo-typography-x-small-semibold-font-size: 11px;
   --leo-typography-x-small-semibold-font-weight: 600;
-  --leo-typography-x-small-semibold-letter-spacing: 0;
+  --leo-typography-x-small-semibold-letter-spacing: 0px;
   --leo-typography-x-small-semibold-line-height: 16px;
-  --leo-typography-x-small-semibold-paragraph-indent: 0;
+  --leo-typography-x-small-semibold-paragraph-indent: 0px;
   --leo-typography-x-small-semibold-paragraph-spacing: 8px;
 }
 
@@ -842,10 +842,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.12);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-100);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-100);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 35px;
+  --leo-color-material-blur-thick: 30px;
+  --leo-color-material-blur-thin: 30px;
+  --leo-color-material-blur-ultrathin: 30px;
   --leo-color-material-divider: rgba(17, 17, 17, 0.25);
   --leo-color-material-regular: rgba(255, 255, 255, 0.73);
   --leo-color-material-separator: rgba(0, 0, 0, 0.08);
@@ -1123,10 +1123,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.24);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-10);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-10);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 100px;
+  --leo-color-material-blur-thick: 100px;
+  --leo-color-material-blur-thin: 100px;
+  --leo-color-material-blur-ultrathin: 100px;
   --leo-color-material-divider: rgba(255, 255, 255, 0.2);
   --leo-color-material-regular: rgba(37, 37, 37, 0.75);
   --leo-color-material-separator: rgba(0, 0, 0, 0.16);
@@ -1435,10 +1435,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.12);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-100);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-100);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 35px;
+  --leo-color-material-blur-thick: 30px;
+  --leo-color-material-blur-thin: 30px;
+  --leo-color-material-blur-ultrathin: 30px;
   --leo-color-material-divider: rgba(17, 17, 17, 0.25);
   --leo-color-material-regular: rgba(255, 255, 255, 0.73);
   --leo-color-material-separator: rgba(0, 0, 0, 0.08);
@@ -1714,10 +1714,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.24);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-10);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-10);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 100px;
+  --leo-color-material-blur-thick: 100px;
+  --leo-color-material-blur-thin: 100px;
+  --leo-color-material-blur-ultrathin: 100px;
   --leo-color-material-divider: rgba(255, 255, 255, 0.2);
   --leo-color-material-regular: rgba(37, 37, 37, 0.75);
   --leo-color-material-separator: rgba(0, 0, 0, 0.16);

@AlanBreck AlanBreck force-pushed the upgrade-style-dictionary branch 7 times, most recently from 542557e to d46ce90 Compare April 8, 2025 15:05
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 8, 2025

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1046.pr.nala.bravesoftware.com/
✅ Commit preview: https://1046.pr.nala.bravesoftware.com/commit-d46ce9058ca794ec0711ea3d202f520f5e445974/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7484 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6710 bytes
---
- ./tokens/css/variables-ios.old.css: 7033 bytes
+ ./tokens/css/variables-ios.css: 7109 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13625 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 524 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1955 bytes
---
- ./tokens/css/variables-search.old.css: 2409 bytes
+ ./tokens/css/variables-search.css: 2431 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 891 bytes
---
- ./tokens/css/variables.old.css: 119686 bytes
+ ./tokens/css/variables.css: 119754 bytes
Variables Diff: variables-android.diff 
--- ./tokens/css/variables-android.old.css	2025-04-08 15:06:30.375275082 +0000
+++ ./tokens/css/variables-android.css	2025-04-08 15:05:58.679343279 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Tue Apr 08 2025 06:19:16 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 08 Apr 2025 15:05:58 GMT
  */
 
 :root {
@@ -25,102 +25,102 @@
   --leo-typography-android-default-regular-font-weight: 400;
   --leo-typography-android-default-regular-letter-spacing: -0.2px;
   --leo-typography-android-default-regular-line-height: 20px;
-  --leo-typography-android-default-regular-paragraph-indent: 0;
-  --leo-typography-android-default-regular-paragraph-spacing: 0;
+  --leo-typography-android-default-regular-paragraph-indent: 0px;
+  --leo-typography-android-default-regular-paragraph-spacing: 0px;
   --leo-typography-android-default-semibold-font-size: 14px;
   --leo-typography-android-default-semibold-font-weight: 600;
   --leo-typography-android-default-semibold-letter-spacing: -0.2px;
   --leo-typography-android-default-semibold-line-height: 20px;
-  --leo-typography-android-default-semibold-paragraph-indent: 0;
-  --leo-typography-android-default-semibold-paragraph-spacing: 0;
+  --leo-typography-android-default-semibold-paragraph-indent: 0px;
+  --leo-typography-android-default-semibold-paragraph-spacing: 0px;
   --leo-typography-android-heading-display1-font-size: 45px;
   --leo-typography-android-heading-display1-font-weight: 500;
-  --leo-typography-android-heading-display1-letter-spacing: 0;
+  --leo-typography-android-heading-display1-letter-spacing: 0px;
   --leo-typography-android-heading-display1-line-height: 52px;
-  --leo-typography-android-heading-display1-paragraph-indent: 0;
-  --leo-typography-android-heading-display1-paragraph-spacing: 0;
+  --leo-typography-android-heading-display1-paragraph-indent: 0px;
+  --leo-typography-android-heading-display1-paragraph-spacing: 0px;
   --leo-typography-android-heading-display2-font-size: 36px;
   --leo-typography-android-heading-display2-font-weight: 500;
-  --leo-typography-android-heading-display2-letter-spacing: 0;
+  --leo-typography-android-heading-display2-letter-spacing: 0px;
   --leo-typography-android-heading-display2-line-height: 44px;
-  --leo-typography-android-heading-display2-paragraph-indent: 0;
-  --leo-typography-android-heading-display2-paragraph-spacing: 0;
+  --leo-typography-android-heading-display2-paragraph-indent: 0px;
+  --leo-typography-android-heading-display2-paragraph-spacing: 0px;
   --leo-typography-android-heading-h1-font-size: 32px;
   --leo-typography-android-heading-h1-font-weight: 500;
-  --leo-typography-android-heading-h1-letter-spacing: 0;
+  --leo-typography-android-heading-h1-letter-spacing: 0px;
   --leo-typography-android-heading-h1-line-height: 40px;
-  --leo-typography-android-heading-h1-paragraph-indent: 0;
-  --leo-typography-android-heading-h1-paragraph-spacing: 0;
+  --leo-typography-android-heading-h1-paragraph-indent: 0px;
+  --leo-typography-android-heading-h1-paragraph-spacing: 0px;
   --leo-typography-android-heading-h2-font-size: 28px;
   --leo-typography-android-heading-h2-font-weight: 500;
-  --leo-typography-android-heading-h2-letter-spacing: 0;
+  --leo-typography-android-heading-h2-letter-spacing: 0px;
   --leo-typography-android-heading-h2-line-height: 36px;
-  --leo-typography-android-heading-h2-paragraph-indent: 0;
-  --leo-typography-android-heading-h2-paragraph-spacing: 0;
+  --leo-typography-android-heading-h2-paragraph-indent: 0px;
+  --leo-typography-android-heading-h2-paragraph-spacing: 0px;
   --leo-typography-android-heading-h3-font-size: 22px;
   --leo-typography-android-heading-h3-font-weight: 500;
-  --leo-typography-android-heading-h3-letter-spacing: 0;
+  --leo-typography-android-heading-h3-letter-spacing: 0px;
   --leo-typography-android-heading-h3-line-height: 28px;
-  --leo-typography-android-heading-h3-paragraph-indent: 0;
-  --leo-typography-android-heading-h3-paragraph-spacing: 0;
+  --leo-typography-android-heading-h3-paragraph-indent: 0px;
+  --leo-typography-android-heading-h3-paragraph-spacing: 0px;
   --leo-typography-android-heading-h4-font-size: 16px;
   --leo-typography-android-heading-h4-font-weight: 600;
-  --leo-typography-android-heading-h4-letter-spacing: 0;
+  --leo-typography-android-heading-h4-letter-spacing: 0px;
   --leo-typography-android-heading-h4-line-height: 24px;
-  --leo-typography-android-heading-h4-paragraph-indent: 0;
-  --leo-typography-android-heading-h4-paragraph-spacing: 0;
+  --leo-typography-android-heading-h4-paragraph-indent: 0px;
+  --leo-typography-android-heading-h4-paragraph-spacing: 0px;
   --leo-typography-android-large-regular-font-size: 16px;
   --leo-typography-android-large-regular-font-weight: 400;
   --leo-typography-android-large-regular-letter-spacing: -0.2px;
   --leo-typography-android-large-regular-line-height: 24px;
-  --leo-typography-android-large-regular-paragraph-indent: 0;
-  --leo-typography-android-large-regular-paragraph-spacing: 0;
+  --leo-typography-android-large-regular-paragraph-indent: 0px;
+  --leo-typography-android-large-regular-paragraph-spacing: 0px;
   --leo-typography-android-large-semibold-font-size: 16px;
   --leo-typography-android-large-semibold-font-weight: 600;
-  --leo-typography-android-large-semibold-letter-spacing: 0;
+  --leo-typography-android-large-semibold-letter-spacing: 0px;
   --leo-typography-android-large-semibold-line-height: 24px;
-  --leo-typography-android-large-semibold-paragraph-indent: 0;
-  --leo-typography-android-large-semibold-paragraph-spacing: 0;
+  --leo-typography-android-large-semibold-paragraph-indent: 0px;
+  --leo-typography-android-large-semibold-paragraph-spacing: 0px;
   --leo-typography-android-monospace-default-font-size: 14px;
   --leo-typography-android-monospace-default-font-weight: 400;
-  --leo-typography-android-monospace-default-letter-spacing: 0;
+  --leo-typography-android-monospace-default-letter-spacing: 0px;
   --leo-typography-android-monospace-default-line-height: 20px;
-  --leo-typography-android-monospace-default-paragraph-indent: 0;
-  --leo-typography-android-monospace-default-paragraph-spacing: 0;
+  --leo-typography-android-monospace-default-paragraph-indent: 0px;
+  --leo-typography-android-monospace-default-paragraph-spacing: 0px;
   --leo-typography-android-monospace-large-font-size: 16px;
   --leo-typography-android-monospace-large-font-weight: 400;
-  --leo-typography-android-monospace-large-letter-spacing: 0;
+  --leo-typography-android-monospace-large-letter-spacing: 0px;
   --leo-typography-android-monospace-large-line-height: 24px;
-  --leo-typography-android-monospace-large-paragraph-indent: 0;
-  --leo-typography-android-monospace-large-paragraph-spacing: 0;
+  --leo-typography-android-monospace-large-paragraph-indent: 0px;
+  --leo-typography-android-monospace-large-paragraph-spacing: 0px;
   --leo-typography-android-monospace-small-font-size: 12px;
   --leo-typography-android-monospace-small-font-weight: 400;
-  --leo-typography-android-monospace-small-letter-spacing: 0;
+  --leo-typography-android-monospace-small-letter-spacing: 0px;
   --leo-typography-android-monospace-small-line-height: 16px;
-  --leo-typography-android-monospace-small-paragraph-indent: 0;
-  --leo-typography-android-monospace-small-paragraph-spacing: 0;
+  --leo-typography-android-monospace-small-paragraph-indent: 0px;
+  --leo-typography-android-monospace-small-paragraph-spacing: 0px;
   --leo-typography-android-small-regular-font-size: 12px;
   --leo-typography-android-small-regular-font-weight: 400;
-  --leo-typography-android-small-regular-letter-spacing: 0;
+  --leo-typography-android-small-regular-letter-spacing: 0px;
   --leo-typography-android-small-regular-line-height: 16px;
-  --leo-typography-android-small-regular-paragraph-indent: 0;
-  --leo-typography-android-small-regular-paragraph-spacing: 0;
+  --leo-typography-android-small-regular-paragraph-indent: 0px;
+  --leo-typography-android-small-regular-paragraph-spacing: 0px;
   --leo-typography-android-small-semibold-font-size: 12px;
   --leo-typography-android-small-semibold-font-weight: 600;
-  --leo-typography-android-small-semibold-letter-spacing: 0;
+  --leo-typography-android-small-semibold-letter-spacing: 0px;
   --leo-typography-android-small-semibold-line-height: 16px;
-  --leo-typography-android-small-semibold-paragraph-indent: 0;
-  --leo-typography-android-small-semibold-paragraph-spacing: 0;
+  --leo-typography-android-small-semibold-paragraph-indent: 0px;
+  --leo-typography-android-small-semibold-paragraph-spacing: 0px;
   --leo-typography-android-x-small-regular-font-size: 11px;
   --leo-typography-android-x-small-regular-font-weight: 400;
-  --leo-typography-android-x-small-regular-letter-spacing: 0;
+  --leo-typography-android-x-small-regular-letter-spacing: 0px;
   --leo-typography-android-x-small-regular-line-height: 16px;
-  --leo-typography-android-x-small-regular-paragraph-indent: 0;
-  --leo-typography-android-x-small-regular-paragraph-spacing: 0;
+  --leo-typography-android-x-small-regular-paragraph-indent: 0px;
+  --leo-typography-android-x-small-regular-paragraph-spacing: 0px;
   --leo-typography-android-x-small-semibold-font-size: 11px;
   --leo-typography-android-x-small-semibold-font-weight: 600;
-  --leo-typography-android-x-small-semibold-letter-spacing: 0;
+  --leo-typography-android-x-small-semibold-letter-spacing: 0px;
   --leo-typography-android-x-small-semibold-line-height: 16px;
-  --leo-typography-android-x-small-semibold-paragraph-indent: 0;
-  --leo-typography-android-x-small-semibold-paragraph-spacing: 0;
+  --leo-typography-android-x-small-semibold-paragraph-indent: 0px;
+  --leo-typography-android-x-small-semibold-paragraph-spacing: 0px;
 }
Variables Diff: variables-browser.diff 
--- ./tokens/css/variables-browser.old.css	2025-04-08 15:06:30.612274528 +0000
+++ ./tokens/css/variables-browser.css	2025-04-08 15:05:58.058344348 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Tue Apr 08 2025 06:19:16 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 08 Apr 2025 15:05:58 GMT
  */
 
 :root {
@@ -19,82 +19,82 @@
   --leo-font-x-small-semibold: 600 12px/14.4px Inter Variable;
   --leo-typography-default-link-font-size: 14px;
   --leo-typography-default-link-font-weight: 400;
-  --leo-typography-default-link-letter-spacing: 0;
+  --leo-typography-default-link-letter-spacing: 0px;
   --leo-typography-default-link-line-height: 16.8px;
-  --leo-typography-default-link-paragraph-indent: 0;
-  --leo-typography-default-link-paragraph-spacing: 0;
+  --leo-typography-default-link-paragraph-indent: 0px;
+  --leo-typography-default-link-paragraph-spacing: 0px;
   --leo-typography-default-regular-font-size: 14px;
   --leo-typography-default-regular-font-weight: 400;
   --leo-typography-default-regular-letter-spacing: -0.1px;
   --leo-typography-default-regular-line-height: 16.8px;
-  --leo-typography-default-regular-paragraph-indent: 0;
-  --leo-typography-default-regular-paragraph-spacing: 0;
+  --leo-typography-default-regular-paragraph-indent: 0px;
+  --leo-typography-default-regular-paragraph-spacing: 0px;
   --leo-typography-default-semibold-font-size: 14px;
   --leo-typography-default-semibold-font-weight: 600;
   --leo-typography-default-semibold-letter-spacing: -0.1px;
   --leo-typography-default-semibold-line-height: 16.8px;
-  --leo-typography-default-semibold-paragraph-indent: 0;
-  --leo-typography-default-semibold-paragraph-spacing: 0;
+  --leo-typography-default-semibold-paragraph-indent: 0px;
+  --leo-typography-default-semibold-paragraph-spacing: 0px;
   --leo-typography-large-link-font-size: 16px;
   --leo-typography-large-link-font-weight: 400;
-  --leo-typography-large-link-letter-spacing: 0;
+  --leo-typography-large-link-letter-spacing: 0px;
   --leo-typography-large-link-line-height: 19.2px;
-  --leo-typography-large-link-paragraph-indent: 0;
-  --leo-typography-large-link-paragraph-spacing: 0;
+  --leo-typography-large-link-paragraph-indent: 0px;
+  --leo-typography-large-link-paragraph-spacing: 0px;
   --leo-typography-large-regular-font-size: 16px;
   --leo-typography-large-regular-font-weight: 400;
   --leo-typography-large-regular-letter-spacing: -0.2px;
   --leo-typography-large-regular-line-height: 19.2px;
-  --leo-typography-large-regular-paragraph-indent: 0;
-  --leo-typography-large-regular-paragraph-spacing: 0;
+  --leo-typography-large-regular-paragraph-indent: 0px;
+  --leo-typography-large-regular-paragraph-spacing: 0px;
   --leo-typography-large-semibold-font-size: 16px;
   --leo-typography-large-semibold-font-weight: 600;
   --leo-typography-large-semibold-letter-spacing: -0.2px;
   --leo-typography-large-semibold-line-height: 19.2px;
-  --leo-typography-large-semibold-paragraph-indent: 0;
-  --leo-typography-large-semibold-paragraph-spacing: 0;
+  --leo-typography-large-semibold-paragraph-indent: 0px;
+  --leo-typography-large-semibold-paragraph-spacing: 0px;
   --leo-typography-sidebar-product-title-font-size: 19px;
   --leo-typography-sidebar-product-title-font-weight: 600;
   --leo-typography-sidebar-product-title-letter-spacing: -0.285px;
   --leo-typography-sidebar-product-title-line-height: 19px;
-  --leo-typography-sidebar-product-title-paragraph-indent: 0;
-  --leo-typography-sidebar-product-title-paragraph-spacing: 0;
+  --leo-typography-sidebar-product-title-paragraph-indent: 0px;
+  --leo-typography-sidebar-product-title-paragraph-spacing: 0px;
   --leo-typography-small-link-font-size: 13px;
   --leo-typography-small-link-font-weight: 400;
-  --leo-typography-small-link-letter-spacing: 0;
+  --leo-typography-small-link-letter-spacing: 0px;
   --leo-typography-small-link-line-height: 15.6px;
-  --leo-typography-small-link-paragraph-indent: 0;
-  --leo-typography-small-link-paragraph-spacing: 0;
+  --leo-typography-small-link-paragraph-indent: 0px;
+  --leo-typography-small-link-paragraph-spacing: 0px;
   --leo-typography-small-regular-font-size: 13px;
   --leo-typography-small-regular-font-weight: 400;
-  --leo-typography-small-regular-letter-spacing: 0;
+  --leo-typography-small-regular-letter-spacing: 0px;
   --leo-typography-small-regular-line-height: 15.6px;
-  --leo-typography-small-regular-paragraph-indent: 0;
-  --leo-typography-small-regular-paragraph-spacing: 0;
+  --leo-typography-small-regular-paragraph-indent: 0px;
+  --leo-typography-small-regular-paragraph-spacing: 0px;
   --leo-typography-small-semibold-font-size: 13px;
   --leo-typography-small-semibold-font-weight: 600;
-  --leo-typography-small-semibold-letter-spacing: 0;
+  --leo-typography-small-semibold-letter-spacing: 0px;
   --leo-typography-small-semibold-line-height: 15.6px;
-  --leo-typography-small-semibold-paragraph-indent: 0;
-  --leo-typography-small-semibold-paragraph-spacing: 0;
+  --leo-typography-small-semibold-paragraph-indent: 0px;
+  --leo-typography-small-semibold-paragraph-spacing: 0px;
   --leo-typography-x-small-link-font-size: 12px;
   --leo-typography-x-small-link-font-weight: 400;
-  --leo-typography-x-small-link-letter-spacing: 0;
+  --leo-typography-x-small-link-letter-spacing: 0px;
   --leo-typography-x-small-link-line-height: 14.4px;
-  --leo-typography-x-small-link-paragraph-indent: 0;
-  --leo-typography-x-small-link-paragraph-spacing: 0;
+  --leo-typography-x-small-link-paragraph-indent: 0px;
+  --leo-typography-x-small-link-paragraph-spacing: 0px;
   --leo-typography-x-small-regular-font-size: 12px;
   --leo-typography-x-small-regular-font-weight: 400;
-  --leo-typography-x-small-regular-letter-spacing: 0;
+  --leo-typography-x-small-regular-letter-spacing: 0px;
   --leo-typography-x-small-regular-line-height: 14.4px;
-  --leo-typography-x-small-regular-paragraph-indent: 0;
-  --leo-typography-x-small-regular-paragraph-spacing: 0;
+  --leo-typography-x-small-regular-paragraph-indent: 0px;
+  --leo-typography-x-small-regular-paragraph-spacing: 0px;
   --leo-typography-x-small-semibold-font-size: 12px;
   --leo-typography-x-small-semibold-font-weight: 600;
-  --leo-typography-x-small-semibold-letter-spacing: 0;
+  --leo-typography-x-small-semibold-letter-spacing: 0px;
   --leo-typography-x-small-semibold-line-height: 14.4px;
-  --leo-typography-x-small-semibold-paragraph-indent: 0;
-  --leo-typography-x-small-semibold-paragraph-spacing: 0;
+  --leo-typography-x-small-semibold-paragraph-indent: 0px;
+  --leo-typography-x-small-semibold-paragraph-spacing: 0px;
 }
 
 @media (prefers-color-scheme: light) {
Variables Diff: variables-ios.diff 
--- ./tokens/css/variables-ios.old.css	2025-04-08 15:06:30.827274028 +0000
+++ ./tokens/css/variables-ios.css	2025-04-08 15:05:59.228342333 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Tue Apr 08 2025 06:19:16 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 08 Apr 2025 15:05:59 GMT
  */
 
 :root {
@@ -25,102 +25,102 @@
   --leo-typography-ios-default-regular-font-weight: 400;
   --leo-typography-ios-default-regular-letter-spacing: -0.2px;
   --leo-typography-ios-default-regular-line-height: 20px;
-  --leo-typography-ios-default-regular-paragraph-indent: 0;
-  --leo-typography-ios-default-regular-paragraph-spacing: 0;
+  --leo-typography-ios-default-regular-paragraph-indent: 0px;
+  --leo-typography-ios-default-regular-paragraph-spacing: 0px;
   --leo-typography-ios-default-semibold-font-size: 15px;
   --leo-typography-ios-default-semibold-font-weight: 600;
   --leo-typography-ios-default-semibold-letter-spacing: -0.2px;
   --leo-typography-ios-default-semibold-line-height: 20px;
-  --leo-typography-ios-default-semibold-paragraph-indent: 0;
-  --leo-typography-ios-default-semibold-paragraph-spacing: 0;
+  --leo-typography-ios-default-semibold-paragraph-indent: 0px;
+  --leo-typography-ios-default-semibold-paragraph-spacing: 0px;
   --leo-typography-ios-heading-display1-font-size: 44px;
   --leo-typography-ios-heading-display1-font-weight: 500;
-  --leo-typography-ios-heading-display1-letter-spacing: 0;
+  --leo-typography-ios-heading-display1-letter-spacing: 0px;
   --leo-typography-ios-heading-display1-line-height: 52px;
-  --leo-typography-ios-heading-display1-paragraph-indent: 0;
-  --leo-typography-ios-heading-display1-paragraph-spacing: 0;
+  --leo-typography-ios-heading-display1-paragraph-indent: 0px;
+  --leo-typography-ios-heading-display1-paragraph-spacing: 0px;
   --leo-typography-ios-heading-display2-font-size: 36px;
   --leo-typography-ios-heading-display2-font-weight: 500;
-  --leo-typography-ios-heading-display2-letter-spacing: 0;
+  --leo-typography-ios-heading-display2-letter-spacing: 0px;
   --leo-typography-ios-heading-display2-line-height: 44px;
-  --leo-typography-ios-heading-display2-paragraph-indent: 0;
-  --leo-typography-ios-heading-display2-paragraph-spacing: 0;
+  --leo-typography-ios-heading-display2-paragraph-indent: 0px;
+  --leo-typography-ios-heading-display2-paragraph-spacing: 0px;
   --leo-typography-ios-heading-h1-font-size: 32px;
   --leo-typography-ios-heading-h1-font-weight: 500;
   --leo-typography-ios-heading-h1-letter-spacing: 0.37px;
   --leo-typography-ios-heading-h1-line-height: 40px;
-  --leo-typography-ios-heading-h1-paragraph-indent: 0;
-  --leo-typography-ios-heading-h1-paragraph-spacing: 0;
+  --leo-typography-ios-heading-h1-paragraph-indent: 0px;
+  --leo-typography-ios-heading-h1-paragraph-spacing: 0px;
   --leo-typography-ios-heading-h2-font-size: 28px;
   --leo-typography-ios-heading-h2-font-weight: 500;
   --leo-typography-ios-heading-h2-letter-spacing: 0.36px;
   --leo-typography-ios-heading-h2-line-height: 34px;
-  --leo-typography-ios-heading-h2-paragraph-indent: 0;
-  --leo-typography-ios-heading-h2-paragraph-spacing: 0;
+  --leo-typography-ios-heading-h2-paragraph-indent: 0px;
+  --leo-typography-ios-heading-h2-paragraph-spacing: 0px;
   --leo-typography-ios-heading-h3-font-size: 22px;
   --leo-typography-ios-heading-h3-font-weight: 500;
   --leo-typography-ios-heading-h3-letter-spacing: 0.35px;
   --leo-typography-ios-heading-h3-line-height: 28px;
-  --leo-typography-ios-heading-h3-paragraph-indent: 0;
-  --leo-typography-ios-heading-h3-paragraph-spacing: 0;
+  --leo-typography-ios-heading-h3-paragraph-indent: 0px;
+  --leo-typography-ios-heading-h3-paragraph-spacing: 0px;
   --leo-typography-ios-heading-h4-font-size: 17px;
   --leo-typography-ios-heading-h4-font-weight: 500;
   --leo-typography-ios-heading-h4-letter-spacing: -0.41px;
   --leo-typography-ios-heading-h4-line-height: 22px;
-  --leo-typography-ios-heading-h4-paragraph-indent: 0;
-  --leo-typography-ios-heading-h4-paragraph-spacing: 0;
+  --leo-typography-ios-heading-h4-paragraph-indent: 0px;
+  --leo-typography-ios-heading-h4-paragraph-spacing: 0px;
   --leo-typography-ios-large-regular-font-size: 17px;
   --leo-typography-ios-large-regular-font-weight: 400;
   --leo-typography-ios-large-regular-letter-spacing: -0.2px;
   --leo-typography-ios-large-regular-line-height: 22px;
-  --leo-typography-ios-large-regular-paragraph-indent: 0;
-  --leo-typography-ios-large-regular-paragraph-spacing: 0;
+  --leo-typography-ios-large-regular-paragraph-indent: 0px;
+  --leo-typography-ios-large-regular-paragraph-spacing: 0px;
   --leo-typography-ios-large-semibold-font-size: 17px;
   --leo-typography-ios-large-semibold-font-weight: 600;
   --leo-typography-ios-large-semibold-letter-spacing: -0.2px;
   --leo-typography-ios-large-semibold-line-height: 22px;
-  --leo-typography-ios-large-semibold-paragraph-indent: 0;
-  --leo-typography-ios-large-semibold-paragraph-spacing: 0;
+  --leo-typography-ios-large-semibold-paragraph-indent: 0px;
+  --leo-typography-ios-large-semibold-paragraph-spacing: 0px;
   --leo-typography-ios-monospace-default-font-size: 15px;
   --leo-typography-ios-monospace-default-font-weight: 400;
-  --leo-typography-ios-monospace-default-letter-spacing: 0;
+  --leo-typography-ios-monospace-default-letter-spacing: 0px;
   --leo-typography-ios-monospace-default-line-height: 20px;
-  --leo-typography-ios-monospace-default-paragraph-indent: 0;
-  --leo-typography-ios-monospace-default-paragraph-spacing: 0;
+  --leo-typography-ios-monospace-default-paragraph-indent: 0px;
+  --leo-typography-ios-monospace-default-paragraph-spacing: 0px;
   --leo-typography-ios-monospace-large-font-size: 17px;
   --leo-typography-ios-monospace-large-font-weight: 400;
-  --leo-typography-ios-monospace-large-letter-spacing: 0;
+  --leo-typography-ios-monospace-large-letter-spacing: 0px;
   --leo-typography-ios-monospace-large-line-height: 22px;
-  --leo-typography-ios-monospace-large-paragraph-indent: 0;
-  --leo-typography-ios-monospace-large-paragraph-spacing: 0;
+  --leo-typography-ios-monospace-large-paragraph-indent: 0px;
+  --leo-typography-ios-monospace-large-paragraph-spacing: 0px;
   --leo-typography-ios-monospace-small-font-size: 13px;
   --leo-typography-ios-monospace-small-font-weight: 400;
-  --leo-typography-ios-monospace-small-letter-spacing: 0;
+  --leo-typography-ios-monospace-small-letter-spacing: 0px;
   --leo-typography-ios-monospace-small-line-height: 18px;
-  --leo-typography-ios-monospace-small-paragraph-indent: 0;
-  --leo-typography-ios-monospace-small-paragraph-spacing: 0;
+  --leo-typography-ios-monospace-small-paragraph-indent: 0px;
+  --leo-typography-ios-monospace-small-paragraph-spacing: 0px;
   --leo-typography-ios-small-regular-font-size: 13px;
   --leo-typography-ios-small-regular-font-weight: 400;
   --leo-typography-ios-small-regular-letter-spacing: -0.2px;
   --leo-typography-ios-small-regular-line-height: 18px;
-  --leo-typography-ios-small-regular-paragraph-indent: 0;
-  --leo-typography-ios-small-regular-paragraph-spacing: 0;
+  --leo-typography-ios-small-regular-paragraph-indent: 0px;
+  --leo-typography-ios-small-regular-paragraph-spacing: 0px;
   --leo-typography-ios-small-semibold-font-size: 13px;
   --leo-typography-ios-small-semibold-font-weight: 600;
   --leo-typography-ios-small-semibold-letter-spacing: -0.2px;
   --leo-typography-ios-small-semibold-line-height: 18px;
-  --leo-typography-ios-small-semibold-paragraph-indent: 0;
-  --leo-typography-ios-small-semibold-paragraph-spacing: 0;
+  --leo-typography-ios-small-semibold-paragraph-indent: 0px;
+  --leo-typography-ios-small-semibold-paragraph-spacing: 0px;
   --leo-typography-ios-x-small-regular-font-size: 11px;
   --leo-typography-ios-x-small-regular-font-weight: 400;
   --leo-typography-ios-x-small-regular-letter-spacing: 0.07px;
   --leo-typography-ios-x-small-regular-line-height: 13px;
-  --leo-typography-ios-x-small-regular-paragraph-indent: 0;
-  --leo-typography-ios-x-small-regular-paragraph-spacing: 0;
+  --leo-typography-ios-x-small-regular-paragraph-indent: 0px;
+  --leo-typography-ios-x-small-regular-paragraph-spacing: 0px;
   --leo-typography-ios-x-small-semibold-font-size: 11px;
   --leo-typography-ios-x-small-semibold-font-weight: 600;
   --leo-typography-ios-x-small-semibold-letter-spacing: 0.07px;
   --leo-typography-ios-x-small-semibold-line-height: 13px;
-  --leo-typography-ios-x-small-semibold-paragraph-indent: 0;
-  --leo-typography-ios-x-small-semibold-paragraph-spacing: 0;
+  --leo-typography-ios-x-small-semibold-paragraph-indent: 0px;
+  --leo-typography-ios-x-small-semibold-paragraph-spacing: 0px;
 }
Variables Diff: variables-marketing.diff 
--- ./tokens/css/variables-marketing.old.css	2025-04-08 15:06:31.062273478 +0000
+++ ./tokens/css/variables-marketing.css	2025-04-08 15:05:59.770341400 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Tue Apr 08 2025 06:19:16 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 08 Apr 2025 15:05:59 GMT
  */
 
 :root {
@@ -38,182 +38,182 @@
   --leo-typography-desktop-primary-blockquote-font-weight: 600;
   --leo-typography-desktop-primary-blockquote-letter-spacing: -0.4px;
   --leo-typography-desktop-primary-blockquote-line-height: 30px;
-  --leo-typography-desktop-primary-blockquote-paragraph-indent: 0;
-  --leo-typography-desktop-primary-blockquote-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-blockquote-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-blockquote-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-h1-font-size: 80px;
   --leo-typography-desktop-primary-h1-font-weight: 600;
   --leo-typography-desktop-primary-h1-letter-spacing: -3.2px;
   --leo-typography-desktop-primary-h1-line-height: 100px;
-  --leo-typography-desktop-primary-h1-paragraph-indent: 0;
-  --leo-typography-desktop-primary-h1-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-h1-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-h1-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-h2-font-size: 70px;
   --leo-typography-desktop-primary-h2-font-weight: 600;
   --leo-typography-desktop-primary-h2-letter-spacing: -2.8px;
   --leo-typography-desktop-primary-h2-line-height: 90px;
-  --leo-typography-desktop-primary-h2-paragraph-indent: 0;
-  --leo-typography-desktop-primary-h2-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-h2-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-h2-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-h3-font-size: 40px;
   --leo-typography-desktop-primary-h3-font-weight: 600;
   --leo-typography-desktop-primary-h3-letter-spacing: -1.6px;
   --leo-typography-desktop-primary-h3-line-height: 44px;
-  --leo-typography-desktop-primary-h3-paragraph-indent: 0;
-  --leo-typography-desktop-primary-h3-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-h3-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-h3-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-h4-font-size: 30px;
   --leo-typography-desktop-primary-h4-font-weight: 600;
   --leo-typography-desktop-primary-h4-letter-spacing: -1.2px;
   --leo-typography-desktop-primary-h4-line-height: 40px;
-  --leo-typography-desktop-primary-h4-paragraph-indent: 0;
-  --leo-typography-desktop-primary-h4-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-h4-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-h4-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-h5-font-size: 24px;
   --leo-typography-desktop-primary-h5-font-weight: 600;
   --leo-typography-desktop-primary-h5-letter-spacing: -0.48px;
   --leo-typography-desktop-primary-h5-line-height: 30px;
-  --leo-typography-desktop-primary-h5-paragraph-indent: 0;
-  --leo-typography-desktop-primary-h5-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-h5-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-h5-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-hero-font-size: 120px;
   --leo-typography-desktop-primary-hero-font-weight: 600;
   --leo-typography-desktop-primary-hero-letter-spacing: -4.8px;
   --leo-typography-desktop-primary-hero-line-height: 130px;
-  --leo-typography-desktop-primary-hero-paragraph-indent: 0;
-  --leo-typography-desktop-primary-hero-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-hero-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-hero-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-text-default-font-size: 20px;
   --leo-typography-desktop-primary-text-default-font-weight: 400;
-  --leo-typography-desktop-primary-text-default-letter-spacing: 0;
+  --leo-typography-desktop-primary-text-default-letter-spacing: 0px;
   --leo-typography-desktop-primary-text-default-line-height: 30px;
-  --leo-typography-desktop-primary-text-default-paragraph-indent: 0;
-  --leo-typography-desktop-primary-text-default-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-text-default-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-text-default-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-text-small-font-size: 15px;
   --leo-typography-desktop-primary-text-small-font-weight: 700;
   --leo-typography-desktop-primary-text-small-letter-spacing: -0.45px;
   --leo-typography-desktop-primary-text-small-line-height: 20px;
-  --leo-typography-desktop-primary-text-small-paragraph-indent: 0;
-  --leo-typography-desktop-primary-text-small-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-text-small-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-text-small-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-h1-font-size: 100px;
   --leo-typography-desktop-secondary-h1-font-weight: 500;
   --leo-typography-desktop-secondary-h1-letter-spacing: -2px;
   --leo-typography-desktop-secondary-h1-line-height: 95px;
-  --leo-typography-desktop-secondary-h1-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-h1-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-h1-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-h1-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-h2-font-size: 80px;
   --leo-typography-desktop-secondary-h2-font-weight: 500;
   --leo-typography-desktop-secondary-h2-letter-spacing: -1.6px;
   --leo-typography-desktop-secondary-h2-line-height: 75px;
-  --leo-typography-desktop-secondary-h2-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-h2-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-h2-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-h2-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-h3-font-size: 70px;
   --leo-typography-desktop-secondary-h3-font-weight: 500;
   --leo-typography-desktop-secondary-h3-letter-spacing: -1.4px;
   --leo-typography-desktop-secondary-h3-line-height: 75px;
-  --leo-typography-desktop-secondary-h3-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-h3-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-h3-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-h3-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-h4-font-size: 40px;
   --leo-typography-desktop-secondary-h4-font-weight: 500;
   --leo-typography-desktop-secondary-h4-letter-spacing: -0.8px;
   --leo-typography-desktop-secondary-h4-line-height: 45px;
-  --leo-typography-desktop-secondary-h4-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-h4-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-h4-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-h4-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-h5-font-size: 30px;
   --leo-typography-desktop-secondary-h5-font-weight: 500;
   --leo-typography-desktop-secondary-h5-letter-spacing: -0.6px;
   --leo-typography-desktop-secondary-h5-line-height: 40px;
-  --leo-typography-desktop-secondary-h5-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-h5-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-h5-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-h5-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-hero-font-size: 120px;
   --leo-typography-desktop-secondary-hero-font-weight: 500;
   --leo-typography-desktop-secondary-hero-letter-spacing: -2.4px;
   --leo-typography-desktop-secondary-hero-line-height: 103px;
-  --leo-typography-desktop-secondary-hero-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-hero-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-hero-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-hero-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-blockquote-font-size: 20px;
   --leo-typography-mobile-primary-blockquote-font-weight: 600;
   --leo-typography-mobile-primary-blockquote-letter-spacing: -0.4px;
   --leo-typography-mobile-primary-blockquote-line-height: 28px;
-  --leo-typography-mobile-primary-blockquote-paragraph-indent: 0;
-  --leo-typography-mobile-primary-blockquote-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-blockquote-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-blockquote-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-h1-font-size: 36px;
   --leo-typography-mobile-primary-h1-font-weight: 600;
   --leo-typography-mobile-primary-h1-letter-spacing: -1.44px;
   --leo-typography-mobile-primary-h1-line-height: 45px;
-  --leo-typography-mobile-primary-h1-paragraph-indent: 0;
-  --leo-typography-mobile-primary-h1-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-h1-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-h1-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-h2-font-size: 30px;
   --leo-typography-mobile-primary-h2-font-weight: 600;
   --leo-typography-mobile-primary-h2-letter-spacing: -1.2px;
   --leo-typography-mobile-primary-h2-line-height: 40px;
-  --leo-typography-mobile-primary-h2-paragraph-indent: 0;
-  --leo-typography-mobile-primary-h2-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-h2-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-h2-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-h3-font-size: 24px;
   --leo-typography-mobile-primary-h3-font-weight: 600;
   --leo-typography-mobile-primary-h3-letter-spacing: -0.96px;
   --leo-typography-mobile-primary-h3-line-height: 35px;
-  --leo-typography-mobile-primary-h3-paragraph-indent: 0;
-  --leo-typography-mobile-primary-h3-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-h3-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-h3-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-h4-font-size: 20px;
   --leo-typography-mobile-primary-h4-font-weight: 600;
   --leo-typography-mobile-primary-h4-letter-spacing: -0.8px;
   --leo-typography-mobile-primary-h4-line-height: 25px;
-  --leo-typography-mobile-primary-h4-paragraph-indent: 0;
-  --leo-typography-mobile-primary-h4-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-h4-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-h4-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-h5-font-size: 18px;
   --leo-typography-mobile-primary-h5-font-weight: 600;
   --leo-typography-mobile-primary-h5-letter-spacing: -0.72px;
   --leo-typography-mobile-primary-h5-line-height: 20px;
-  --leo-typography-mobile-primary-h5-paragraph-indent: 0;
-  --leo-typography-mobile-primary-h5-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-h5-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-h5-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-hero-font-size: 54px;
   --leo-typography-mobile-primary-hero-font-weight: 600;
   --leo-typography-mobile-primary-hero-letter-spacing: -2.16px;
   --leo-typography-mobile-primary-hero-line-height: 65px;
-  --leo-typography-mobile-primary-hero-paragraph-indent: 0;
-  --leo-typography-mobile-primary-hero-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-hero-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-hero-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-text-default-font-size: 18px;
   --leo-typography-mobile-primary-text-default-font-weight: 400;
-  --leo-typography-mobile-primary-text-default-letter-spacing: 0;
+  --leo-typography-mobile-primary-text-default-letter-spacing: 0px;
   --leo-typography-mobile-primary-text-default-line-height: 28px;
-  --leo-typography-mobile-primary-text-default-paragraph-indent: 0;
-  --leo-typography-mobile-primary-text-default-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-text-default-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-text-default-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-text-small-font-size: 15px;
   --leo-typography-mobile-primary-text-small-font-weight: 700;
-  --leo-typography-mobile-primary-text-small-letter-spacing: 0;
+  --leo-typography-mobile-primary-text-small-letter-spacing: 0px;
   --leo-typography-mobile-primary-text-small-line-height: 20px;
-  --leo-typography-mobile-primary-text-small-paragraph-indent: 0;
-  --leo-typography-mobile-primary-text-small-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-text-small-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-text-small-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-h1-font-size: 40px;
   --leo-typography-mobile-secondary-h1-font-weight: 500;
   --leo-typography-mobile-secondary-h1-letter-spacing: -0.8px;
   --leo-typography-mobile-secondary-h1-line-height: 45px;
-  --leo-typography-mobile-secondary-h1-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-h1-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-h1-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-h1-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-h2-font-size: 36px;
   --leo-typography-mobile-secondary-h2-font-weight: 500;
   --leo-typography-mobile-secondary-h2-letter-spacing: -0.72px;
   --leo-typography-mobile-secondary-h2-line-height: 40px;
-  --leo-typography-mobile-secondary-h2-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-h2-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-h2-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-h2-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-h3-font-size: 30px;
   --leo-typography-mobile-secondary-h3-font-weight: 500;
   --leo-typography-mobile-secondary-h3-letter-spacing: -0.6px;
   --leo-typography-mobile-secondary-h3-line-height: 30px;
-  --leo-typography-mobile-secondary-h3-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-h3-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-h3-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-h3-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-h4-font-size: 24px;
   --leo-typography-mobile-secondary-h4-font-weight: 500;
   --leo-typography-mobile-secondary-h4-letter-spacing: -0.48px;
   --leo-typography-mobile-secondary-h4-line-height: 30px;
-  --leo-typography-mobile-secondary-h4-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-h4-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-h4-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-h4-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-h5-font-size: 20px;
   --leo-typography-mobile-secondary-h5-font-weight: 500;
   --leo-typography-mobile-secondary-h5-letter-spacing: -0.4px;
   --leo-typography-mobile-secondary-h5-line-height: 25px;
-  --leo-typography-mobile-secondary-h5-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-h5-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-h5-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-h5-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-hero-font-size: 54px;
   --leo-typography-mobile-secondary-hero-font-weight: 500;
   --leo-typography-mobile-secondary-hero-letter-spacing: -1.08px;
   --leo-typography-mobile-secondary-hero-line-height: 50px;
-  --leo-typography-mobile-secondary-hero-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-hero-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-hero-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-hero-paragraph-spacing: 0px;
 }
 
 @media (prefers-color-scheme: light) {
Variables Diff: variables-news.diff 
--- ./tokens/css/variables-news.old.css	2025-04-08 15:06:31.293272941 +0000
+++ ./tokens/css/variables-news.css	2025-04-08 15:06:00.678339836 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Tue Apr 08 2025 06:19:16 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 08 Apr 2025 15:06:00 GMT
  */
 
 :root {
Variables Diff: variables-newtab.diff 
--- ./tokens/css/variables-newtab.old.css	2025-04-08 15:06:31.517272418 +0000
+++ ./tokens/css/variables-newtab.css	2025-04-08 15:06:01.119339077 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Tue Apr 08 2025 06:19:16 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 08 Apr 2025 15:06:01 GMT
  */
 
 :root {
@@ -11,26 +11,26 @@
   --leo-gradient-ntp-overlay: linear-gradient(359.99997954866785deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.5) 100%);
   --leo-typography-brave-rewards-widget-progress-font-size: 24px;
   --leo-typography-brave-rewards-widget-progress-font-weight: 400;
-  --leo-typography-brave-rewards-widget-progress-letter-spacing: 0;
+  --leo-typography-brave-rewards-widget-progress-letter-spacing: 0px;
   --leo-typography-brave-rewards-widget-progress-line-height: 24px;
-  --leo-typography-brave-rewards-widget-progress-paragraph-indent: 0;
-  --leo-typography-brave-rewards-widget-progress-paragraph-spacing: 0;
+  --leo-typography-brave-rewards-widget-progress-paragraph-indent: 0px;
+  --leo-typography-brave-rewards-widget-progress-paragraph-spacing: 0px;
   --leo-typography-brave-rewards-widget-token-balance-font-size: 36px;
   --leo-typography-brave-rewards-widget-token-balance-font-weight: 400;
-  --leo-typography-brave-rewards-widget-token-balance-letter-spacing: 0;
+  --leo-typography-brave-rewards-widget-token-balance-letter-spacing: 0px;
   --leo-typography-brave-rewards-widget-token-balance-line-height: 36px;
-  --leo-typography-brave-rewards-widget-token-balance-paragraph-indent: 0;
-  --leo-typography-brave-rewards-widget-token-balance-paragraph-spacing: 0;
+  --leo-typography-brave-rewards-widget-token-balance-paragraph-indent: 0px;
+  --leo-typography-brave-rewards-widget-token-balance-paragraph-spacing: 0px;
   --leo-typography-stats-h2-font-size: 40px;
   --leo-typography-stats-h2-font-weight: 400;
-  --leo-typography-stats-h2-letter-spacing: 0;
+  --leo-typography-stats-h2-letter-spacing: 0px;
   --leo-typography-stats-h2-line-height: 40px;
-  --leo-typography-stats-h2-paragraph-indent: 0;
-  --leo-typography-stats-h2-paragraph-spacing: 0;
+  --leo-typography-stats-h2-paragraph-indent: 0px;
+  --leo-typography-stats-h2-paragraph-spacing: 0px;
   --leo-typography-stats-h3-font-size: 20px;
   --leo-typography-stats-h3-font-weight: 500;
-  --leo-typography-stats-h3-letter-spacing: 0;
+  --leo-typography-stats-h3-letter-spacing: 0px;
   --leo-typography-stats-h3-line-height: 24px;
-  --leo-typography-stats-h3-paragraph-indent: 0;
-  --leo-typography-stats-h3-paragraph-spacing: 0;
+  --leo-typography-stats-h3-paragraph-indent: 0px;
+  --leo-typography-stats-h3-paragraph-spacing: 0px;
 }
Variables Diff: variables-search.diff 
--- ./tokens/css/variables-search.old.css	2025-04-08 15:06:31.722271937 +0000
+++ ./tokens/css/variables-search.css	2025-04-08 15:06:00.238340594 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Tue Apr 08 2025 06:19:16 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 08 Apr 2025 15:06:00 GMT
  */
 
 :root {
@@ -14,32 +14,32 @@
   --leo-gradient-search-navigation: linear-gradient(307.16553222317134deg, rgb(191, 20, 162) 0%, rgb(247, 58, 28) 100%);
   --leo-typography-heading-h5-font-size: 20px;
   --leo-typography-heading-h5-font-weight: 600;
-  --leo-typography-heading-h5-letter-spacing: 0;
+  --leo-typography-heading-h5-letter-spacing: 0px;
   --leo-typography-heading-h5-line-height: 26px;
-  --leo-typography-heading-h5-paragraph-indent: 0;
-  --leo-typography-heading-h5-paragraph-spacing: 0;
+  --leo-typography-heading-h5-paragraph-indent: 0px;
+  --leo-typography-heading-h5-paragraph-spacing: 0px;
   --leo-typography-heading-serpresult-font-size: 18px;
   --leo-typography-heading-serpresult-font-weight: 400;
-  --leo-typography-heading-serpresult-letter-spacing: 0;
+  --leo-typography-heading-serpresult-letter-spacing: 0px;
   --leo-typography-heading-serpresult-line-height: 26px;
-  --leo-typography-heading-serpresult-paragraph-indent: 0;
-  --leo-typography-heading-serpresult-paragraph-spacing: 0;
+  --leo-typography-heading-serpresult-paragraph-indent: 0px;
+  --leo-typography-heading-serpresult-paragraph-spacing: 0px;
   --leo-typography-text-small-bold-font-size: 13px;
   --leo-typography-text-small-bold-font-weight: 600;
   --leo-typography-text-small-bold-letter-spacing: -0.2px;
   --leo-typography-text-small-bold-line-height: 21px;
-  --leo-typography-text-small-bold-paragraph-indent: 0;
-  --leo-typography-text-small-bold-paragraph-spacing: 0;
+  --leo-typography-text-small-bold-paragraph-indent: 0px;
+  --leo-typography-text-small-bold-paragraph-spacing: 0px;
   --leo-typography-text-small-link-font-size: 13px;
   --leo-typography-text-small-link-font-weight: 600;
   --leo-typography-text-small-link-letter-spacing: -0.2px;
   --leo-typography-text-small-link-line-height: 21px;
-  --leo-typography-text-small-link-paragraph-indent: 0;
-  --leo-typography-text-small-link-paragraph-spacing: 0;
+  --leo-typography-text-small-link-paragraph-indent: 0px;
+  --leo-typography-text-small-link-paragraph-spacing: 0px;
   --leo-typography-text-small-regular-font-size: 13px;
   --leo-typography-text-small-regular-font-weight: 400;
   --leo-typography-text-small-regular-letter-spacing: -0.2px;
   --leo-typography-text-small-regular-line-height: 21px;
-  --leo-typography-text-small-regular-paragraph-indent: 0;
-  --leo-typography-text-small-regular-paragraph-spacing: 0;
+  --leo-typography-text-small-regular-paragraph-indent: 0px;
+  --leo-typography-text-small-regular-paragraph-spacing: 0px;
 }
Variables Diff: variables-web3.diff 
--- ./tokens/css/variables-web3.old.css	2025-04-08 15:06:31.940271429 +0000
+++ ./tokens/css/variables-web3.css	2025-04-08 15:06:01.543338346 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Tue Apr 08 2025 06:19:16 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 08 Apr 2025 15:06:01 GMT
  */
 
 @media (prefers-color-scheme: light) {
Variables Diff: variables.diff 
--- ./tokens/css/variables.old.css	2025-04-08 15:06:32.317270551 +0000
+++ ./tokens/css/variables.css	2025-04-08 15:05:56.267348028 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Tue Apr 08 2025 06:19:16 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Tue, 08 Apr 2025 15:05:56 GMT
  */
 
 :root {
@@ -432,112 +432,112 @@
   --leo-typography-android-size-x-small: 11px;
   --leo-typography-components-button-default-font-size: 14px;
   --leo-typography-components-button-default-font-weight: 600;
-  --leo-typography-components-button-default-letter-spacing: 0;
+  --leo-typography-components-button-default-letter-spacing: 0px;
   --leo-typography-components-button-default-line-height: 20px;
-  --leo-typography-components-button-default-paragraph-indent: 0;
-  --leo-typography-components-button-default-paragraph-spacing: 0;
+  --leo-typography-components-button-default-paragraph-indent: 0px;
+  --leo-typography-components-button-default-paragraph-spacing: 0px;
   --leo-typography-components-button-jumbo-font-size: 18px;
   --leo-typography-components-button-jumbo-font-weight: 600;
-  --leo-typography-components-button-jumbo-letter-spacing: 0;
+  --leo-typography-components-button-jumbo-letter-spacing: 0px;
   --leo-typography-components-button-jumbo-line-height: 24px;
-  --leo-typography-components-button-jumbo-paragraph-indent: 0;
-  --leo-typography-components-button-jumbo-paragraph-spacing: 0;
+  --leo-typography-components-button-jumbo-paragraph-indent: 0px;
+  --leo-typography-components-button-jumbo-paragraph-spacing: 0px;
   --leo-typography-components-button-large-font-size: 16px;
   --leo-typography-components-button-large-font-weight: 600;
-  --leo-typography-components-button-large-letter-spacing: 0;
+  --leo-typography-components-button-large-letter-spacing: 0px;
   --leo-typography-components-button-large-line-height: 22px;
-  --leo-typography-components-button-large-paragraph-indent: 0;
-  --leo-typography-components-button-large-paragraph-spacing: 0;
+  --leo-typography-components-button-large-paragraph-indent: 0px;
+  --leo-typography-components-button-large-paragraph-spacing: 0px;
   --leo-typography-components-button-small-font-size: 12px;
   --leo-typography-components-button-small-font-weight: 600;
-  --leo-typography-components-button-small-letter-spacing: 0;
+  --leo-typography-components-button-small-letter-spacing: 0px;
   --leo-typography-components-button-small-line-height: 18px;
-  --leo-typography-components-button-small-paragraph-indent: 0;
-  --leo-typography-components-button-small-paragraph-spacing: 0;
+  --leo-typography-components-button-small-paragraph-indent: 0px;
+  --leo-typography-components-button-small-paragraph-spacing: 0px;
   --leo-typography-components-label-font-size: 10px;
   --leo-typography-components-label-font-weight: 700;
-  --leo-typography-components-label-letter-spacing: 0;
+  --leo-typography-components-label-letter-spacing: 0px;
   --leo-typography-components-label-line-height: 10px;
-  --leo-typography-components-label-paragraph-indent: 0;
-  --leo-typography-components-label-paragraph-spacing: 0;
+  --leo-typography-components-label-paragraph-indent: 0px;
+  --leo-typography-components-label-paragraph-spacing: 0px;
   --leo-typography-components-navbutton-font-size: 14px;
   --leo-typography-components-navbutton-font-weight: 600;
-  --leo-typography-components-navbutton-letter-spacing: 0;
+  --leo-typography-components-navbutton-letter-spacing: 0px;
   --leo-typography-components-navbutton-line-height: 22px;
-  --leo-typography-components-navbutton-paragraph-indent: 0;
-  --leo-typography-components-navbutton-paragraph-spacing: 0;
+  --leo-typography-components-navbutton-paragraph-indent: 0px;
+  --leo-typography-components-navbutton-paragraph-spacing: 0px;
   --leo-typography-components-numbers-large-font-size: 36px;
   --leo-typography-components-numbers-large-font-weight: 600;
   --leo-typography-components-numbers-large-letter-spacing: -0.72px;
   --leo-typography-components-numbers-large-line-height: 46px;
-  --leo-typography-components-numbers-large-paragraph-indent: 0;
-  --leo-typography-components-numbers-large-paragraph-spacing: 0;
+  --leo-typography-components-numbers-large-paragraph-indent: 0px;
+  --leo-typography-components-numbers-large-paragraph-spacing: 0px;
   --leo-typography-components-tableheader-font-size: 13px;
   --leo-typography-components-tableheader-font-weight: 600;
-  --leo-typography-components-tableheader-letter-spacing: 0;
+  --leo-typography-components-tableheader-letter-spacing: 0px;
   --leo-typography-components-tableheader-line-height: 16px;
-  --leo-typography-components-tableheader-paragraph-indent: 0;
-  --leo-typography-components-tableheader-paragraph-spacing: 0;
+  --leo-typography-components-tableheader-paragraph-indent: 0px;
+  --leo-typography-components-tableheader-paragraph-spacing: 0px;
   --leo-typography-default-link-font-size: 14px;
   --leo-typography-default-link-font-weight: 400;
-  --leo-typography-default-link-letter-spacing: 0;
+  --leo-typography-default-link-letter-spacing: 0px;
   --leo-typography-default-link-line-height: 22px;
-  --leo-typography-default-link-paragraph-indent: 0;
+  --leo-typography-default-link-paragraph-indent: 0px;
   --leo-typography-default-link-paragraph-spacing: 8px;
   --leo-typography-default-regular-font-size: 14px;
   --leo-typography-default-regular-font-weight: 400;
-  --leo-typography-default-regular-letter-spacing: 0;
+  --leo-typography-default-regular-letter-spacing: 0px;
   --leo-typography-default-regular-line-height: 22px;
-  --leo-typography-default-regular-paragraph-indent: 0;
+  --leo-typography-default-regular-paragraph-indent: 0px;
   --leo-typography-default-regular-paragraph-spacing: 8px;
   --leo-typography-default-semibold-font-size: 14px;
   --leo-typography-default-semibold-font-weight: 600;
-  --leo-typography-default-semibold-letter-spacing: 0;
+  --leo-typography-default-semibold-letter-spacing: 0px;
   --leo-typography-default-semibold-line-height: 22px;
-  --leo-typography-default-semibold-paragraph-indent: 0;
+  --leo-typography-default-semibold-paragraph-indent: 0px;
   --leo-typography-default-semibold-paragraph-spacing: 8px;
   --leo-typography-heading-display1-font-size: 46px;
   --leo-typography-heading-display1-font-weight: 600;
   --leo-typography-heading-display1-letter-spacing: -0.5px;
   --leo-typography-heading-display1-line-height: 54px;
-  --leo-typography-heading-display1-paragraph-indent: 0;
-  --leo-typography-heading-display1-paragraph-spacing: 0;
+  --leo-typography-heading-display1-paragraph-indent: 0px;
+  --leo-typography-heading-display1-paragraph-spacing: 0px;
   --leo-typography-heading-display2-font-size: 40px;
   --leo-typography-heading-display2-font-weight: 600;
   --leo-typography-heading-display2-letter-spacing: -0.5px;
   --leo-typography-heading-display2-line-height: 48px;
-  --leo-typography-heading-display2-paragraph-indent: 0;
-  --leo-typography-heading-display2-paragraph-spacing: 0;
+  --leo-typography-heading-display2-paragraph-indent: 0px;
+  --leo-typography-heading-display2-paragraph-spacing: 0px;
   --leo-typography-heading-display3-font-size: 34px;
   --leo-typography-heading-display3-font-weight: 600;
   --leo-typography-heading-display3-letter-spacing: -0.5px;
   --leo-typography-heading-display3-line-height: 40px;
-  --leo-typography-heading-display3-paragraph-indent: 0;
-  --leo-typography-heading-display3-paragraph-spacing: 0;
+  --leo-typography-heading-display3-paragraph-indent: 0px;
+  --leo-typography-heading-display3-paragraph-spacing: 0px;
   --leo-typography-heading-h1-font-size: 32px;
   --leo-typography-heading-h1-font-weight: 600;
   --leo-typography-heading-h1-letter-spacing: -0.5px;
   --leo-typography-heading-h1-line-height: 42px;
-  --leo-typography-heading-h1-paragraph-indent: 0;
-  --leo-typography-heading-h1-paragraph-spacing: 0;
+  --leo-typography-heading-h1-paragraph-indent: 0px;
+  --leo-typography-heading-h1-paragraph-spacing: 0px;
   --leo-typography-heading-h2-font-size: 28px;
   --leo-typography-heading-h2-font-weight: 600;
   --leo-typography-heading-h2-letter-spacing: -0.5px;
   --leo-typography-heading-h2-line-height: 36px;
-  --leo-typography-heading-h2-paragraph-indent: 0;
-  --leo-typography-heading-h2-paragraph-spacing: 0;
+  --leo-typography-heading-h2-paragraph-indent: 0px;
+  --leo-typography-heading-h2-paragraph-spacing: 0px;
   --leo-typography-heading-h3-font-size: 22px;
   --leo-typography-heading-h3-font-weight: 600;
   --leo-typography-heading-h3-letter-spacing: -0.5px;
   --leo-typography-heading-h3-line-height: 28px;
-  --leo-typography-heading-h3-paragraph-indent: 0;
-  --leo-typography-heading-h3-paragraph-spacing: 0;
+  --leo-typography-heading-h3-paragraph-indent: 0px;
+  --leo-typography-heading-h3-paragraph-spacing: 0px;
   --leo-typography-heading-h4-font-size: 16px;
   --leo-typography-heading-h4-font-weight: 600;
-  --leo-typography-heading-h4-letter-spacing: 0;
+  --leo-typography-heading-h4-letter-spacing: 0px;
   --leo-typography-heading-h4-line-height: 26px;
-  --leo-typography-heading-h4-paragraph-indent: 0;
-  --leo-typography-heading-h4-paragraph-spacing: 0;
+  --leo-typography-heading-h4-paragraph-indent: 0px;
+  --leo-typography-heading-h4-paragraph-spacing: 0px;
   --leo-typography-ios-letter-spacing-button: -0.4000000059604645px;
   --leo-typography-ios-letter-spacing-default: -0.23000000417232513px;
   --leo-typography-ios-letter-spacing-headings: -0.25999999046325684px;
@@ -584,21 +584,21 @@
   --leo-typography-ios-size-x-small: 11px;
   --leo-typography-large-link-font-size: 16px;
   --leo-typography-large-link-font-weight: 400;
-  --leo-typography-large-link-letter-spacing: 0;
+  --leo-typography-large-link-letter-spacing: 0px;
   --leo-typography-large-link-line-height: 24px;
-  --leo-typography-large-link-paragraph-indent: 0;
+  --leo-typography-large-link-paragraph-indent: 0px;
   --leo-typography-large-link-paragraph-spacing: 8px;
   --leo-typography-large-regular-font-size: 16px;
   --leo-typography-large-regular-font-weight: 400;
-  --leo-typography-large-regular-letter-spacing: 0;
+  --leo-typography-large-regular-letter-spacing: 0px;
   --leo-typography-large-regular-line-height: 24px;
-  --leo-typography-large-regular-paragraph-indent: 0;
+  --leo-typography-large-regular-paragraph-indent: 0px;
   --leo-typography-large-regular-paragraph-spacing: 8px;
   --leo-typography-large-semibold-font-size: 16px;
   --leo-typography-large-semibold-font-weight: 600;
-  --leo-typography-large-semibold-letter-spacing: 0;
+  --leo-typography-large-semibold-letter-spacing: 0px;
   --leo-typography-large-semibold-line-height: 24px;
-  --leo-typography-large-semibold-paragraph-indent: 0;
+  --leo-typography-large-semibold-paragraph-indent: 0px;
   --leo-typography-large-semibold-paragraph-spacing: 8px;
   --leo-typography-letter-spacing-button: 0px;
   --leo-typography-letter-spacing-default: 0px;
@@ -670,22 +670,22 @@
   --leo-typography-mobile-size-x-small: 11px;
   --leo-typography-monospace-default-font-size: 14px;
   --leo-typography-monospace-default-font-weight: 400;
-  --leo-typography-monospace-default-letter-spacing: 0;
+  --leo-typography-monospace-default-letter-spacing: 0px;
   --leo-typography-monospace-default-line-height: 22px;
-  --leo-typography-monospace-default-paragraph-indent: 0;
-  --leo-typography-monospace-default-paragraph-spacing: 0;
+  --leo-typography-monospace-default-paragraph-indent: 0px;
+  --leo-typography-monospace-default-paragraph-spacing: 0px;
   --leo-typography-monospace-large-font-size: 16px;
   --leo-typography-monospace-large-font-weight: 400;
-  --leo-typography-monospace-large-letter-spacing: 0;
+  --leo-typography-monospace-large-letter-spacing: 0px;
   --leo-typography-monospace-large-line-height: 24px;
-  --leo-typography-monospace-large-paragraph-indent: 0;
-  --leo-typography-monospace-large-paragraph-spacing: 0;
+  --leo-typography-monospace-large-paragraph-indent: 0px;
+  --leo-typography-monospace-large-paragraph-spacing: 0px;
   --leo-typography-monospace-small-font-size: 12px;
   --leo-typography-monospace-small-font-weight: 400;
-  --leo-typography-monospace-small-letter-spacing: 0;
+  --leo-typography-monospace-small-letter-spacing: 0px;
   --leo-typography-monospace-small-line-height: 18px;
-  --leo-typography-monospace-small-paragraph-indent: 0;
-  --leo-typography-monospace-small-paragraph-spacing: 0;
+  --leo-typography-monospace-small-paragraph-indent: 0px;
+  --leo-typography-monospace-small-paragraph-spacing: 0px;
   --leo-typography-paragraph-spacing-default: 8px;
   --leo-typography-size-button-default: 14px;
   --leo-typography-size-button-jumbo: 18px;
@@ -708,39 +708,39 @@
   --leo-typography-size-x-small: 11px;
   --leo-typography-small-link-font-size: 12px;
   --leo-typography-small-link-font-weight: 400;
-  --leo-typography-small-link-letter-spacing: 0;
+  --leo-typography-small-link-letter-spacing: 0px;
   --leo-typography-small-link-line-height: 18px;
-  --leo-typography-small-link-paragraph-indent: 0;
+  --leo-typography-small-link-paragraph-indent: 0px;
   --leo-typography-small-link-paragraph-spacing: 8px;
   --leo-typography-small-regular-font-size: 12px;
   --leo-typography-small-regular-font-weight: 400;
-  --leo-typography-small-regular-letter-spacing: 0;
+  --leo-typography-small-regular-letter-spacing: 0px;
   --leo-typography-small-regular-line-height: 18px;
-  --leo-typography-small-regular-paragraph-indent: 0;
+  --leo-typography-small-regular-paragraph-indent: 0px;
   --leo-typography-small-regular-paragraph-spacing: 8px;
   --leo-typography-small-semibold-font-size: 12px;
   --leo-typography-small-semibold-font-weight: 600;
-  --leo-typography-small-semibold-letter-spacing: 0;
+  --leo-typography-small-semibold-letter-spacing: 0px;
   --leo-typography-small-semibold-line-height: 18px;
-  --leo-typography-small-semibold-paragraph-indent: 0;
+  --leo-typography-small-semibold-paragraph-indent: 0px;
   --leo-typography-small-semibold-paragraph-spacing: 8px;
   --leo-typography-x-small-link-font-size: 11px;
   --leo-typography-x-small-link-font-weight: 400;
-  --leo-typography-x-small-link-letter-spacing: 0;
+  --leo-typography-x-small-link-letter-spacing: 0px;
   --leo-typography-x-small-link-line-height: 16px;
-  --leo-typography-x-small-link-paragraph-indent: 0;
+  --leo-typography-x-small-link-paragraph-indent: 0px;
   --leo-typography-x-small-link-paragraph-spacing: 8px;
   --leo-typography-x-small-regular-font-size: 11px;
   --leo-typography-x-small-regular-font-weight: 400;
-  --leo-typography-x-small-regular-letter-spacing: 0;
+  --leo-typography-x-small-regular-letter-spacing: 0px;
   --leo-typography-x-small-regular-line-height: 16px;
-  --leo-typography-x-small-regular-paragraph-indent: 0;
+  --leo-typography-x-small-regular-paragraph-indent: 0px;
   --leo-typography-x-small-regular-paragraph-spacing: 8px;
   --leo-typography-x-small-semibold-font-size: 11px;
   --leo-typography-x-small-semibold-font-weight: 600;
-  --leo-typography-x-small-semibold-letter-spacing: 0;
+  --leo-typography-x-small-semibold-letter-spacing: 0px;
   --leo-typography-x-small-semibold-line-height: 16px;
-  --leo-typography-x-small-semibold-paragraph-indent: 0;
+  --leo-typography-x-small-semibold-paragraph-indent: 0px;
   --leo-typography-x-small-semibold-paragraph-spacing: 8px;
 }
 
@@ -842,10 +842,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.12);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-100);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-100);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 35px;
+  --leo-color-material-blur-thick: 30px;
+  --leo-color-material-blur-thin: 30px;
+  --leo-color-material-blur-ultrathin: 30px;
   --leo-color-material-divider: rgba(17, 17, 17, 0.25);
   --leo-color-material-regular: rgba(255, 255, 255, 0.73);
   --leo-color-material-separator: rgba(0, 0, 0, 0.08);
@@ -1123,10 +1123,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.24);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-10);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-10);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 100px;
+  --leo-color-material-blur-thick: 100px;
+  --leo-color-material-blur-thin: 100px;
+  --leo-color-material-blur-ultrathin: 100px;
   --leo-color-material-divider: rgba(255, 255, 255, 0.2);
   --leo-color-material-regular: rgba(37, 37, 37, 0.75);
   --leo-color-material-separator: rgba(0, 0, 0, 0.16);
@@ -1435,10 +1435,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.12);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-100);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-100);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 35px;
+  --leo-color-material-blur-thick: 30px;
+  --leo-color-material-blur-thin: 30px;
+  --leo-color-material-blur-ultrathin: 30px;
   --leo-color-material-divider: rgba(17, 17, 17, 0.25);
   --leo-color-material-regular: rgba(255, 255, 255, 0.73);
   --leo-color-material-separator: rgba(0, 0, 0, 0.08);
@@ -1714,10 +1714,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.24);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-10);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-10);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 100px;
+  --leo-color-material-blur-thick: 100px;
+  --leo-color-material-blur-thin: 100px;
+  --leo-color-material-blur-ultrathin: 100px;
   --leo-color-material-divider: rgba(255, 255, 255, 0.2);
   --leo-color-material-regular: rgba(37, 37, 37, 0.75);
   --leo-color-material-separator: rgba(0, 0, 0, 0.16);

@AlanBreck AlanBreck marked this pull request as ready for review April 8, 2025 15:08
fallaciousreasoning
fallaciousreasoning approved these changes Apr 8, 2025
View reviewed changes
Copy link
Collaborator

@fallaciousreasoning fallaciousreasoning left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

lgtm! One thing I've noticed is that this changes all our 0s to 0px which might not be what we want

@AlanBreck
Copy link
Collaborator Author

AlanBreck commented Apr 11, 2025 •
edited
Loading

lgtm! One thing I've noticed is that this changes all our 0s to 0px which might not be what we want

Are there particular examples of where 0px wouldn't be appropriate?

Here's an interesting one:

Details 
@@ -842,10 +842,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.12);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-100);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-100);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 35px;
+  --leo-color-material-blur-thick: 30px;
+  --leo-color-material-blur-thin: 30px;
+  --leo-color-material-blur-ultrathin: 30px;
   --leo-color-material-divider: rgba(17, 17, 17, 0.25);
   --leo-color-material-regular: rgba(255, 255, 255, 0.73);
   --leo-color-material-separator: rgba(0, 0, 0, 0.08);
@@ -1123,10 +1123,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.24);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-10);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-10);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 100px;
+  --leo-color-material-blur-thick: 100px;
+  --leo-color-material-blur-thin: 100px;
+  --leo-color-material-blur-ultrathin: 100px;
   --leo-color-material-divider: rgba(255, 255, 255, 0.2);
   --leo-color-material-regular: rgba(37, 37, 37, 0.75);
   --leo-color-material-separator: rgba(0, 0, 0, 0.16);
@@ -1435,10 +1435,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.12);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-100);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-100);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 35px;
+  --leo-color-material-blur-thick: 30px;
+  --leo-color-material-blur-thin: 30px;
+  --leo-color-material-blur-ultrathin: 30px;
   --leo-color-material-divider: rgba(17, 17, 17, 0.25);
   --leo-color-material-regular: rgba(255, 255, 255, 0.73);
   --leo-color-material-separator: rgba(0, 0, 0, 0.08);
@@ -1714,10 +1714,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.24);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-10);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-10);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 100px;
+  --leo-color-material-blur-thick: 100px;
+  --leo-color-material-blur-thin: 100px;
+  --leo-color-material-blur-ultrathin: 100px;
   --leo-color-material-divider: rgba(255, 255, 255, 0.2);
   --leo-color-material-regular: rgba(37, 37, 37, 0.75);
   --leo-color-material-separator: rgba(0, 0, 0, 0.16);

Any ideas on why these are in the colors:

leo/src/tokens/universal.variables.json

Lines 2924 to 2939 in 4cd2b78

"blur-thick": {
"type": "number",
"value": 30
},
"blur-regular": {
"type": "number",
"value": 35
},
"blur-thin": {
"type": "number",
"value": 30
},
"blur-ultrathin": {
"type": "number",
"value": 30
}

@AlanBreck AlanBreck force-pushed the upgrade-style-dictionary branch from 4cd2b78 to ffed8ab Compare April 11, 2025 00:14
@github-actions GitHub Actions
Copy link
Contributor

[puLL-Merge] - brave/leo@1046

Description

This PR updates the Style Dictionary package from version 3.9.2 to 4.3.3, which involves significant API changes requiring code refactoring throughout the tokens processing pipeline. The PR also removes the unused lodash.camelcase dependency, updates TypeScript typings, and converts many JavaScript files to TypeScript.

Changes

Changes

  1. Package Dependencies

    • Removed lodash.camelcase dependency
    • Upgraded style-dictionary from 3.9.2 to 4.3.3

  2. Type Definitions

    • Updated JSDoc type annotations in src/postcss/theme.js and src/scripts/common.js for better optional parameter handling
    • Changed import path for Style Dictionary types from direct import to style-dictionary/types

  3. Style Dictionary API Updates

    • Updated Style Dictionary instantiation from StyleDictionary.extend() to new StyleDictionary()
    • Converted synchronous code to asynchronous with await for StyleDictionary build process
    • Renamed methods to match Style Dictionary v4 API:
      • matcher → filter
      • transformer → transform
      • formatter → format
      • usesReference → usesReferences
      • getReferences → getReferences

  4. Token Processing

    • Changed parser registration to use hooks system
    • Updated file header generation to use new API
    • Added timestamp formatting options

  5. File Format Conversion

    • Converted multiple JavaScript files to TypeScript (mainly in src/tokens/transformation/)
    • Updated imports to use TypeScript-compatible syntax

  6. Filter and Transform Registration

    • Updated all transformers, filters, and formatters to use named exports with proper type annotations
    • Added explicit name properties to all registered components
sequenceDiagram
    participant App as Application
    participant SD as StyleDictionary
    participant Parser as TokenParser
    participant Transform as Transformers
    participant Format as Formatters
    
    Note over App,Format: Initialize Style Dictionary
    App->>SD: Create new StyleDictionary instance
    SD->>Parser: Register parsers with hooks
    SD->>Transform: Register transforms
    SD->>Format: Register formats
    
    Note over App,Format: Build Token Pipeline
    App->>SD: await hasInitialized
    SD->>Parser: Parse token files with leo-parser
    Parser-->>SD: Return parsed tokens
    
    SD->>Transform: Apply transforms (color, size, etc)
    Transform-->>SD: Return transformed tokens
    
    SD->>Format: Format tokens for output (CSS, JS, etc)
    Format-->>SD: Return formatted output
    
    SD->>App: Return built platform files
    
    Note over App,Format: Build Multiple Platforms
    App->>SD: buildPlatform('css')
    App->>SD: buildPlatform('json-flat')
    App->>SD: buildPlatform('tailwind')
    App->>SD: buildPlatform('android')
    App->>SD: buildPlatform('ios')
    App->>SD: buildPlatform('skia')
Loading

@github-actions GitHub Actions
Copy link
Contributor

👋 Thanks for Submitting! This PR is available for preview at the link below.

✅ PR tip preview: https://1046.pr.nala.bravesoftware.com/
✅ Commit preview: https://1046.pr.nala.bravesoftware.com/commit-ffed8ab74bb42e5be77947fb6f35eaa0676e615a/

- ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 7484 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 6710 bytes
---
- ./tokens/css/variables-ios.old.css: 7033 bytes
+ ./tokens/css/variables-ios.css: 7109 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 13625 bytes
---
- ./tokens/css/variables-news.old.css: 526 bytes
+ ./tokens/css/variables-news.css: 524 bytes
---
- ./tokens/css/variables-newtab.old.css: 1933 bytes
+ ./tokens/css/variables-newtab.css: 1955 bytes
---
- ./tokens/css/variables-search.old.css: 2409 bytes
+ ./tokens/css/variables-search.css: 2431 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 891 bytes
---
- ./tokens/css/variables.old.css: 120612 bytes
+ ./tokens/css/variables.css: 120680 bytes
Variables Diff: variables-android.diff 
--- ./tokens/css/variables-android.old.css	2025-04-11 00:15:34.631301971 +0000
+++ ./tokens/css/variables-android.css	2025-04-11 00:15:02.499136439 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Wed Apr 09 2025 19:26:34 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 11 Apr 2025 00:15:02 GMT
  */
 
 :root {
@@ -25,102 +25,102 @@
   --leo-typography-android-default-regular-font-weight: 400;
   --leo-typography-android-default-regular-letter-spacing: -0.2px;
   --leo-typography-android-default-regular-line-height: 20px;
-  --leo-typography-android-default-regular-paragraph-indent: 0;
-  --leo-typography-android-default-regular-paragraph-spacing: 0;
+  --leo-typography-android-default-regular-paragraph-indent: 0px;
+  --leo-typography-android-default-regular-paragraph-spacing: 0px;
   --leo-typography-android-default-semibold-font-size: 14px;
   --leo-typography-android-default-semibold-font-weight: 600;
   --leo-typography-android-default-semibold-letter-spacing: -0.2px;
   --leo-typography-android-default-semibold-line-height: 20px;
-  --leo-typography-android-default-semibold-paragraph-indent: 0;
-  --leo-typography-android-default-semibold-paragraph-spacing: 0;
+  --leo-typography-android-default-semibold-paragraph-indent: 0px;
+  --leo-typography-android-default-semibold-paragraph-spacing: 0px;
   --leo-typography-android-heading-display1-font-size: 45px;
   --leo-typography-android-heading-display1-font-weight: 500;
-  --leo-typography-android-heading-display1-letter-spacing: 0;
+  --leo-typography-android-heading-display1-letter-spacing: 0px;
   --leo-typography-android-heading-display1-line-height: 52px;
-  --leo-typography-android-heading-display1-paragraph-indent: 0;
-  --leo-typography-android-heading-display1-paragraph-spacing: 0;
+  --leo-typography-android-heading-display1-paragraph-indent: 0px;
+  --leo-typography-android-heading-display1-paragraph-spacing: 0px;
   --leo-typography-android-heading-display2-font-size: 36px;
   --leo-typography-android-heading-display2-font-weight: 500;
-  --leo-typography-android-heading-display2-letter-spacing: 0;
+  --leo-typography-android-heading-display2-letter-spacing: 0px;
   --leo-typography-android-heading-display2-line-height: 44px;
-  --leo-typography-android-heading-display2-paragraph-indent: 0;
-  --leo-typography-android-heading-display2-paragraph-spacing: 0;
+  --leo-typography-android-heading-display2-paragraph-indent: 0px;
+  --leo-typography-android-heading-display2-paragraph-spacing: 0px;
   --leo-typography-android-heading-h1-font-size: 32px;
   --leo-typography-android-heading-h1-font-weight: 500;
-  --leo-typography-android-heading-h1-letter-spacing: 0;
+  --leo-typography-android-heading-h1-letter-spacing: 0px;
   --leo-typography-android-heading-h1-line-height: 40px;
-  --leo-typography-android-heading-h1-paragraph-indent: 0;
-  --leo-typography-android-heading-h1-paragraph-spacing: 0;
+  --leo-typography-android-heading-h1-paragraph-indent: 0px;
+  --leo-typography-android-heading-h1-paragraph-spacing: 0px;
   --leo-typography-android-heading-h2-font-size: 28px;
   --leo-typography-android-heading-h2-font-weight: 500;
-  --leo-typography-android-heading-h2-letter-spacing: 0;
+  --leo-typography-android-heading-h2-letter-spacing: 0px;
   --leo-typography-android-heading-h2-line-height: 36px;
-  --leo-typography-android-heading-h2-paragraph-indent: 0;
-  --leo-typography-android-heading-h2-paragraph-spacing: 0;
+  --leo-typography-android-heading-h2-paragraph-indent: 0px;
+  --leo-typography-android-heading-h2-paragraph-spacing: 0px;
   --leo-typography-android-heading-h3-font-size: 22px;
   --leo-typography-android-heading-h3-font-weight: 500;
-  --leo-typography-android-heading-h3-letter-spacing: 0;
+  --leo-typography-android-heading-h3-letter-spacing: 0px;
   --leo-typography-android-heading-h3-line-height: 28px;
-  --leo-typography-android-heading-h3-paragraph-indent: 0;
-  --leo-typography-android-heading-h3-paragraph-spacing: 0;
+  --leo-typography-android-heading-h3-paragraph-indent: 0px;
+  --leo-typography-android-heading-h3-paragraph-spacing: 0px;
   --leo-typography-android-heading-h4-font-size: 16px;
   --leo-typography-android-heading-h4-font-weight: 600;
-  --leo-typography-android-heading-h4-letter-spacing: 0;
+  --leo-typography-android-heading-h4-letter-spacing: 0px;
   --leo-typography-android-heading-h4-line-height: 24px;
-  --leo-typography-android-heading-h4-paragraph-indent: 0;
-  --leo-typography-android-heading-h4-paragraph-spacing: 0;
+  --leo-typography-android-heading-h4-paragraph-indent: 0px;
+  --leo-typography-android-heading-h4-paragraph-spacing: 0px;
   --leo-typography-android-large-regular-font-size: 16px;
   --leo-typography-android-large-regular-font-weight: 400;
   --leo-typography-android-large-regular-letter-spacing: -0.2px;
   --leo-typography-android-large-regular-line-height: 24px;
-  --leo-typography-android-large-regular-paragraph-indent: 0;
-  --leo-typography-android-large-regular-paragraph-spacing: 0;
+  --leo-typography-android-large-regular-paragraph-indent: 0px;
+  --leo-typography-android-large-regular-paragraph-spacing: 0px;
   --leo-typography-android-large-semibold-font-size: 16px;
   --leo-typography-android-large-semibold-font-weight: 600;
-  --leo-typography-android-large-semibold-letter-spacing: 0;
+  --leo-typography-android-large-semibold-letter-spacing: 0px;
   --leo-typography-android-large-semibold-line-height: 24px;
-  --leo-typography-android-large-semibold-paragraph-indent: 0;
-  --leo-typography-android-large-semibold-paragraph-spacing: 0;
+  --leo-typography-android-large-semibold-paragraph-indent: 0px;
+  --leo-typography-android-large-semibold-paragraph-spacing: 0px;
   --leo-typography-android-monospace-default-font-size: 14px;
   --leo-typography-android-monospace-default-font-weight: 400;
-  --leo-typography-android-monospace-default-letter-spacing: 0;
+  --leo-typography-android-monospace-default-letter-spacing: 0px;
   --leo-typography-android-monospace-default-line-height: 20px;
-  --leo-typography-android-monospace-default-paragraph-indent: 0;
-  --leo-typography-android-monospace-default-paragraph-spacing: 0;
+  --leo-typography-android-monospace-default-paragraph-indent: 0px;
+  --leo-typography-android-monospace-default-paragraph-spacing: 0px;
   --leo-typography-android-monospace-large-font-size: 16px;
   --leo-typography-android-monospace-large-font-weight: 400;
-  --leo-typography-android-monospace-large-letter-spacing: 0;
+  --leo-typography-android-monospace-large-letter-spacing: 0px;
   --leo-typography-android-monospace-large-line-height: 24px;
-  --leo-typography-android-monospace-large-paragraph-indent: 0;
-  --leo-typography-android-monospace-large-paragraph-spacing: 0;
+  --leo-typography-android-monospace-large-paragraph-indent: 0px;
+  --leo-typography-android-monospace-large-paragraph-spacing: 0px;
   --leo-typography-android-monospace-small-font-size: 12px;
   --leo-typography-android-monospace-small-font-weight: 400;
-  --leo-typography-android-monospace-small-letter-spacing: 0;
+  --leo-typography-android-monospace-small-letter-spacing: 0px;
   --leo-typography-android-monospace-small-line-height: 16px;
-  --leo-typography-android-monospace-small-paragraph-indent: 0;
-  --leo-typography-android-monospace-small-paragraph-spacing: 0;
+  --leo-typography-android-monospace-small-paragraph-indent: 0px;
+  --leo-typography-android-monospace-small-paragraph-spacing: 0px;
   --leo-typography-android-small-regular-font-size: 12px;
   --leo-typography-android-small-regular-font-weight: 400;
-  --leo-typography-android-small-regular-letter-spacing: 0;
+  --leo-typography-android-small-regular-letter-spacing: 0px;
   --leo-typography-android-small-regular-line-height: 16px;
-  --leo-typography-android-small-regular-paragraph-indent: 0;
-  --leo-typography-android-small-regular-paragraph-spacing: 0;
+  --leo-typography-android-small-regular-paragraph-indent: 0px;
+  --leo-typography-android-small-regular-paragraph-spacing: 0px;
   --leo-typography-android-small-semibold-font-size: 12px;
   --leo-typography-android-small-semibold-font-weight: 600;
-  --leo-typography-android-small-semibold-letter-spacing: 0;
+  --leo-typography-android-small-semibold-letter-spacing: 0px;
   --leo-typography-android-small-semibold-line-height: 16px;
-  --leo-typography-android-small-semibold-paragraph-indent: 0;
-  --leo-typography-android-small-semibold-paragraph-spacing: 0;
+  --leo-typography-android-small-semibold-paragraph-indent: 0px;
+  --leo-typography-android-small-semibold-paragraph-spacing: 0px;
   --leo-typography-android-x-small-regular-font-size: 11px;
   --leo-typography-android-x-small-regular-font-weight: 400;
-  --leo-typography-android-x-small-regular-letter-spacing: 0;
+  --leo-typography-android-x-small-regular-letter-spacing: 0px;
   --leo-typography-android-x-small-regular-line-height: 16px;
-  --leo-typography-android-x-small-regular-paragraph-indent: 0;
-  --leo-typography-android-x-small-regular-paragraph-spacing: 0;
+  --leo-typography-android-x-small-regular-paragraph-indent: 0px;
+  --leo-typography-android-x-small-regular-paragraph-spacing: 0px;
   --leo-typography-android-x-small-semibold-font-size: 11px;
   --leo-typography-android-x-small-semibold-font-weight: 600;
-  --leo-typography-android-x-small-semibold-letter-spacing: 0;
+  --leo-typography-android-x-small-semibold-letter-spacing: 0px;
   --leo-typography-android-x-small-semibold-line-height: 16px;
-  --leo-typography-android-x-small-semibold-paragraph-indent: 0;
-  --leo-typography-android-x-small-semibold-paragraph-spacing: 0;
+  --leo-typography-android-x-small-semibold-paragraph-indent: 0px;
+  --leo-typography-android-x-small-semibold-paragraph-spacing: 0px;
 }
Variables Diff: variables-browser.diff 
--- ./tokens/css/variables-browser.old.css	2025-04-11 00:15:34.901303159 +0000
+++ ./tokens/css/variables-browser.css	2025-04-11 00:15:01.864133347 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Wed Apr 09 2025 19:26:34 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 11 Apr 2025 00:15:01 GMT
  */
 
 :root {
@@ -19,82 +19,82 @@
   --leo-font-x-small-semibold: 600 12px/14.4px Inter Variable;
   --leo-typography-default-link-font-size: 14px;
   --leo-typography-default-link-font-weight: 400;
-  --leo-typography-default-link-letter-spacing: 0;
+  --leo-typography-default-link-letter-spacing: 0px;
   --leo-typography-default-link-line-height: 16.8px;
-  --leo-typography-default-link-paragraph-indent: 0;
-  --leo-typography-default-link-paragraph-spacing: 0;
+  --leo-typography-default-link-paragraph-indent: 0px;
+  --leo-typography-default-link-paragraph-spacing: 0px;
   --leo-typography-default-regular-font-size: 14px;
   --leo-typography-default-regular-font-weight: 400;
   --leo-typography-default-regular-letter-spacing: -0.1px;
   --leo-typography-default-regular-line-height: 16.8px;
-  --leo-typography-default-regular-paragraph-indent: 0;
-  --leo-typography-default-regular-paragraph-spacing: 0;
+  --leo-typography-default-regular-paragraph-indent: 0px;
+  --leo-typography-default-regular-paragraph-spacing: 0px;
   --leo-typography-default-semibold-font-size: 14px;
   --leo-typography-default-semibold-font-weight: 600;
   --leo-typography-default-semibold-letter-spacing: -0.1px;
   --leo-typography-default-semibold-line-height: 16.8px;
-  --leo-typography-default-semibold-paragraph-indent: 0;
-  --leo-typography-default-semibold-paragraph-spacing: 0;
+  --leo-typography-default-semibold-paragraph-indent: 0px;
+  --leo-typography-default-semibold-paragraph-spacing: 0px;
   --leo-typography-large-link-font-size: 16px;
   --leo-typography-large-link-font-weight: 400;
-  --leo-typography-large-link-letter-spacing: 0;
+  --leo-typography-large-link-letter-spacing: 0px;
   --leo-typography-large-link-line-height: 19.2px;
-  --leo-typography-large-link-paragraph-indent: 0;
-  --leo-typography-large-link-paragraph-spacing: 0;
+  --leo-typography-large-link-paragraph-indent: 0px;
+  --leo-typography-large-link-paragraph-spacing: 0px;
   --leo-typography-large-regular-font-size: 16px;
   --leo-typography-large-regular-font-weight: 400;
   --leo-typography-large-regular-letter-spacing: -0.2px;
   --leo-typography-large-regular-line-height: 19.2px;
-  --leo-typography-large-regular-paragraph-indent: 0;
-  --leo-typography-large-regular-paragraph-spacing: 0;
+  --leo-typography-large-regular-paragraph-indent: 0px;
+  --leo-typography-large-regular-paragraph-spacing: 0px;
   --leo-typography-large-semibold-font-size: 16px;
   --leo-typography-large-semibold-font-weight: 600;
   --leo-typography-large-semibold-letter-spacing: -0.2px;
   --leo-typography-large-semibold-line-height: 19.2px;
-  --leo-typography-large-semibold-paragraph-indent: 0;
-  --leo-typography-large-semibold-paragraph-spacing: 0;
+  --leo-typography-large-semibold-paragraph-indent: 0px;
+  --leo-typography-large-semibold-paragraph-spacing: 0px;
   --leo-typography-sidebar-product-title-font-size: 19px;
   --leo-typography-sidebar-product-title-font-weight: 600;
   --leo-typography-sidebar-product-title-letter-spacing: -0.285px;
   --leo-typography-sidebar-product-title-line-height: 19px;
-  --leo-typography-sidebar-product-title-paragraph-indent: 0;
-  --leo-typography-sidebar-product-title-paragraph-spacing: 0;
+  --leo-typography-sidebar-product-title-paragraph-indent: 0px;
+  --leo-typography-sidebar-product-title-paragraph-spacing: 0px;
   --leo-typography-small-link-font-size: 13px;
   --leo-typography-small-link-font-weight: 400;
-  --leo-typography-small-link-letter-spacing: 0;
+  --leo-typography-small-link-letter-spacing: 0px;
   --leo-typography-small-link-line-height: 15.6px;
-  --leo-typography-small-link-paragraph-indent: 0;
-  --leo-typography-small-link-paragraph-spacing: 0;
+  --leo-typography-small-link-paragraph-indent: 0px;
+  --leo-typography-small-link-paragraph-spacing: 0px;
   --leo-typography-small-regular-font-size: 13px;
   --leo-typography-small-regular-font-weight: 400;
-  --leo-typography-small-regular-letter-spacing: 0;
+  --leo-typography-small-regular-letter-spacing: 0px;
   --leo-typography-small-regular-line-height: 15.6px;
-  --leo-typography-small-regular-paragraph-indent: 0;
-  --leo-typography-small-regular-paragraph-spacing: 0;
+  --leo-typography-small-regular-paragraph-indent: 0px;
+  --leo-typography-small-regular-paragraph-spacing: 0px;
   --leo-typography-small-semibold-font-size: 13px;
   --leo-typography-small-semibold-font-weight: 600;
-  --leo-typography-small-semibold-letter-spacing: 0;
+  --leo-typography-small-semibold-letter-spacing: 0px;
   --leo-typography-small-semibold-line-height: 15.6px;
-  --leo-typography-small-semibold-paragraph-indent: 0;
-  --leo-typography-small-semibold-paragraph-spacing: 0;
+  --leo-typography-small-semibold-paragraph-indent: 0px;
+  --leo-typography-small-semibold-paragraph-spacing: 0px;
   --leo-typography-x-small-link-font-size: 12px;
   --leo-typography-x-small-link-font-weight: 400;
-  --leo-typography-x-small-link-letter-spacing: 0;
+  --leo-typography-x-small-link-letter-spacing: 0px;
   --leo-typography-x-small-link-line-height: 14.4px;
-  --leo-typography-x-small-link-paragraph-indent: 0;
-  --leo-typography-x-small-link-paragraph-spacing: 0;
+  --leo-typography-x-small-link-paragraph-indent: 0px;
+  --leo-typography-x-small-link-paragraph-spacing: 0px;
   --leo-typography-x-small-regular-font-size: 12px;
   --leo-typography-x-small-regular-font-weight: 400;
-  --leo-typography-x-small-regular-letter-spacing: 0;
+  --leo-typography-x-small-regular-letter-spacing: 0px;
   --leo-typography-x-small-regular-line-height: 14.4px;
-  --leo-typography-x-small-regular-paragraph-indent: 0;
-  --leo-typography-x-small-regular-paragraph-spacing: 0;
+  --leo-typography-x-small-regular-paragraph-indent: 0px;
+  --leo-typography-x-small-regular-paragraph-spacing: 0px;
   --leo-typography-x-small-semibold-font-size: 12px;
   --leo-typography-x-small-semibold-font-weight: 600;
-  --leo-typography-x-small-semibold-letter-spacing: 0;
+  --leo-typography-x-small-semibold-letter-spacing: 0px;
   --leo-typography-x-small-semibold-line-height: 14.4px;
-  --leo-typography-x-small-semibold-paragraph-indent: 0;
-  --leo-typography-x-small-semibold-paragraph-spacing: 0;
+  --leo-typography-x-small-semibold-paragraph-indent: 0px;
+  --leo-typography-x-small-semibold-paragraph-spacing: 0px;
 }
 
 @media (prefers-color-scheme: light) {
Variables Diff: variables-ios.diff 
--- ./tokens/css/variables-ios.old.css	2025-04-11 00:15:35.119304117 +0000
+++ ./tokens/css/variables-ios.css	2025-04-11 00:15:03.059139166 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Wed Apr 09 2025 19:26:34 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 11 Apr 2025 00:15:03 GMT
  */
 
 :root {
@@ -25,102 +25,102 @@
   --leo-typography-ios-default-regular-font-weight: 400;
   --leo-typography-ios-default-regular-letter-spacing: -0.2px;
   --leo-typography-ios-default-regular-line-height: 20px;
-  --leo-typography-ios-default-regular-paragraph-indent: 0;
-  --leo-typography-ios-default-regular-paragraph-spacing: 0;
+  --leo-typography-ios-default-regular-paragraph-indent: 0px;
+  --leo-typography-ios-default-regular-paragraph-spacing: 0px;
   --leo-typography-ios-default-semibold-font-size: 15px;
   --leo-typography-ios-default-semibold-font-weight: 600;
   --leo-typography-ios-default-semibold-letter-spacing: -0.2px;
   --leo-typography-ios-default-semibold-line-height: 20px;
-  --leo-typography-ios-default-semibold-paragraph-indent: 0;
-  --leo-typography-ios-default-semibold-paragraph-spacing: 0;
+  --leo-typography-ios-default-semibold-paragraph-indent: 0px;
+  --leo-typography-ios-default-semibold-paragraph-spacing: 0px;
   --leo-typography-ios-heading-display1-font-size: 44px;
   --leo-typography-ios-heading-display1-font-weight: 500;
-  --leo-typography-ios-heading-display1-letter-spacing: 0;
+  --leo-typography-ios-heading-display1-letter-spacing: 0px;
   --leo-typography-ios-heading-display1-line-height: 52px;
-  --leo-typography-ios-heading-display1-paragraph-indent: 0;
-  --leo-typography-ios-heading-display1-paragraph-spacing: 0;
+  --leo-typography-ios-heading-display1-paragraph-indent: 0px;
+  --leo-typography-ios-heading-display1-paragraph-spacing: 0px;
   --leo-typography-ios-heading-display2-font-size: 36px;
   --leo-typography-ios-heading-display2-font-weight: 500;
-  --leo-typography-ios-heading-display2-letter-spacing: 0;
+  --leo-typography-ios-heading-display2-letter-spacing: 0px;
   --leo-typography-ios-heading-display2-line-height: 44px;
-  --leo-typography-ios-heading-display2-paragraph-indent: 0;
-  --leo-typography-ios-heading-display2-paragraph-spacing: 0;
+  --leo-typography-ios-heading-display2-paragraph-indent: 0px;
+  --leo-typography-ios-heading-display2-paragraph-spacing: 0px;
   --leo-typography-ios-heading-h1-font-size: 32px;
   --leo-typography-ios-heading-h1-font-weight: 500;
   --leo-typography-ios-heading-h1-letter-spacing: 0.37px;
   --leo-typography-ios-heading-h1-line-height: 40px;
-  --leo-typography-ios-heading-h1-paragraph-indent: 0;
-  --leo-typography-ios-heading-h1-paragraph-spacing: 0;
+  --leo-typography-ios-heading-h1-paragraph-indent: 0px;
+  --leo-typography-ios-heading-h1-paragraph-spacing: 0px;
   --leo-typography-ios-heading-h2-font-size: 28px;
   --leo-typography-ios-heading-h2-font-weight: 500;
   --leo-typography-ios-heading-h2-letter-spacing: 0.36px;
   --leo-typography-ios-heading-h2-line-height: 34px;
-  --leo-typography-ios-heading-h2-paragraph-indent: 0;
-  --leo-typography-ios-heading-h2-paragraph-spacing: 0;
+  --leo-typography-ios-heading-h2-paragraph-indent: 0px;
+  --leo-typography-ios-heading-h2-paragraph-spacing: 0px;
   --leo-typography-ios-heading-h3-font-size: 22px;
   --leo-typography-ios-heading-h3-font-weight: 500;
   --leo-typography-ios-heading-h3-letter-spacing: 0.35px;
   --leo-typography-ios-heading-h3-line-height: 28px;
-  --leo-typography-ios-heading-h3-paragraph-indent: 0;
-  --leo-typography-ios-heading-h3-paragraph-spacing: 0;
+  --leo-typography-ios-heading-h3-paragraph-indent: 0px;
+  --leo-typography-ios-heading-h3-paragraph-spacing: 0px;
   --leo-typography-ios-heading-h4-font-size: 17px;
   --leo-typography-ios-heading-h4-font-weight: 500;
   --leo-typography-ios-heading-h4-letter-spacing: -0.41px;
   --leo-typography-ios-heading-h4-line-height: 22px;
-  --leo-typography-ios-heading-h4-paragraph-indent: 0;
-  --leo-typography-ios-heading-h4-paragraph-spacing: 0;
+  --leo-typography-ios-heading-h4-paragraph-indent: 0px;
+  --leo-typography-ios-heading-h4-paragraph-spacing: 0px;
   --leo-typography-ios-large-regular-font-size: 17px;
   --leo-typography-ios-large-regular-font-weight: 400;
   --leo-typography-ios-large-regular-letter-spacing: -0.2px;
   --leo-typography-ios-large-regular-line-height: 22px;
-  --leo-typography-ios-large-regular-paragraph-indent: 0;
-  --leo-typography-ios-large-regular-paragraph-spacing: 0;
+  --leo-typography-ios-large-regular-paragraph-indent: 0px;
+  --leo-typography-ios-large-regular-paragraph-spacing: 0px;
   --leo-typography-ios-large-semibold-font-size: 17px;
   --leo-typography-ios-large-semibold-font-weight: 600;
   --leo-typography-ios-large-semibold-letter-spacing: -0.2px;
   --leo-typography-ios-large-semibold-line-height: 22px;
-  --leo-typography-ios-large-semibold-paragraph-indent: 0;
-  --leo-typography-ios-large-semibold-paragraph-spacing: 0;
+  --leo-typography-ios-large-semibold-paragraph-indent: 0px;
+  --leo-typography-ios-large-semibold-paragraph-spacing: 0px;
   --leo-typography-ios-monospace-default-font-size: 15px;
   --leo-typography-ios-monospace-default-font-weight: 400;
-  --leo-typography-ios-monospace-default-letter-spacing: 0;
+  --leo-typography-ios-monospace-default-letter-spacing: 0px;
   --leo-typography-ios-monospace-default-line-height: 20px;
-  --leo-typography-ios-monospace-default-paragraph-indent: 0;
-  --leo-typography-ios-monospace-default-paragraph-spacing: 0;
+  --leo-typography-ios-monospace-default-paragraph-indent: 0px;
+  --leo-typography-ios-monospace-default-paragraph-spacing: 0px;
   --leo-typography-ios-monospace-large-font-size: 17px;
   --leo-typography-ios-monospace-large-font-weight: 400;
-  --leo-typography-ios-monospace-large-letter-spacing: 0;
+  --leo-typography-ios-monospace-large-letter-spacing: 0px;
   --leo-typography-ios-monospace-large-line-height: 22px;
-  --leo-typography-ios-monospace-large-paragraph-indent: 0;
-  --leo-typography-ios-monospace-large-paragraph-spacing: 0;
+  --leo-typography-ios-monospace-large-paragraph-indent: 0px;
+  --leo-typography-ios-monospace-large-paragraph-spacing: 0px;
   --leo-typography-ios-monospace-small-font-size: 13px;
   --leo-typography-ios-monospace-small-font-weight: 400;
-  --leo-typography-ios-monospace-small-letter-spacing: 0;
+  --leo-typography-ios-monospace-small-letter-spacing: 0px;
   --leo-typography-ios-monospace-small-line-height: 18px;
-  --leo-typography-ios-monospace-small-paragraph-indent: 0;
-  --leo-typography-ios-monospace-small-paragraph-spacing: 0;
+  --leo-typography-ios-monospace-small-paragraph-indent: 0px;
+  --leo-typography-ios-monospace-small-paragraph-spacing: 0px;
   --leo-typography-ios-small-regular-font-size: 13px;
   --leo-typography-ios-small-regular-font-weight: 400;
   --leo-typography-ios-small-regular-letter-spacing: -0.2px;
   --leo-typography-ios-small-regular-line-height: 18px;
-  --leo-typography-ios-small-regular-paragraph-indent: 0;
-  --leo-typography-ios-small-regular-paragraph-spacing: 0;
+  --leo-typography-ios-small-regular-paragraph-indent: 0px;
+  --leo-typography-ios-small-regular-paragraph-spacing: 0px;
   --leo-typography-ios-small-semibold-font-size: 13px;
   --leo-typography-ios-small-semibold-font-weight: 600;
   --leo-typography-ios-small-semibold-letter-spacing: -0.2px;
   --leo-typography-ios-small-semibold-line-height: 18px;
-  --leo-typography-ios-small-semibold-paragraph-indent: 0;
-  --leo-typography-ios-small-semibold-paragraph-spacing: 0;
+  --leo-typography-ios-small-semibold-paragraph-indent: 0px;
+  --leo-typography-ios-small-semibold-paragraph-spacing: 0px;
   --leo-typography-ios-x-small-regular-font-size: 11px;
   --leo-typography-ios-x-small-regular-font-weight: 400;
   --leo-typography-ios-x-small-regular-letter-spacing: 0.07px;
   --leo-typography-ios-x-small-regular-line-height: 13px;
-  --leo-typography-ios-x-small-regular-paragraph-indent: 0;
-  --leo-typography-ios-x-small-regular-paragraph-spacing: 0;
+  --leo-typography-ios-x-small-regular-paragraph-indent: 0px;
+  --leo-typography-ios-x-small-regular-paragraph-spacing: 0px;
   --leo-typography-ios-x-small-semibold-font-size: 11px;
   --leo-typography-ios-x-small-semibold-font-weight: 600;
   --leo-typography-ios-x-small-semibold-letter-spacing: 0.07px;
   --leo-typography-ios-x-small-semibold-line-height: 13px;
-  --leo-typography-ios-x-small-semibold-paragraph-indent: 0;
-  --leo-typography-ios-x-small-semibold-paragraph-spacing: 0;
+  --leo-typography-ios-x-small-semibold-paragraph-indent: 0px;
+  --leo-typography-ios-x-small-semibold-paragraph-spacing: 0px;
 }
Variables Diff: variables-marketing.diff 
--- ./tokens/css/variables-marketing.old.css	2025-04-11 00:15:35.386305311 +0000
+++ ./tokens/css/variables-marketing.css	2025-04-11 00:15:03.622141908 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Wed Apr 09 2025 19:26:34 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 11 Apr 2025 00:15:03 GMT
  */
 
 :root {
@@ -38,182 +38,182 @@
   --leo-typography-desktop-primary-blockquote-font-weight: 600;
   --leo-typography-desktop-primary-blockquote-letter-spacing: -0.4px;
   --leo-typography-desktop-primary-blockquote-line-height: 30px;
-  --leo-typography-desktop-primary-blockquote-paragraph-indent: 0;
-  --leo-typography-desktop-primary-blockquote-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-blockquote-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-blockquote-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-h1-font-size: 80px;
   --leo-typography-desktop-primary-h1-font-weight: 600;
   --leo-typography-desktop-primary-h1-letter-spacing: -3.2px;
   --leo-typography-desktop-primary-h1-line-height: 100px;
-  --leo-typography-desktop-primary-h1-paragraph-indent: 0;
-  --leo-typography-desktop-primary-h1-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-h1-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-h1-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-h2-font-size: 70px;
   --leo-typography-desktop-primary-h2-font-weight: 600;
   --leo-typography-desktop-primary-h2-letter-spacing: -2.8px;
   --leo-typography-desktop-primary-h2-line-height: 90px;
-  --leo-typography-desktop-primary-h2-paragraph-indent: 0;
-  --leo-typography-desktop-primary-h2-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-h2-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-h2-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-h3-font-size: 40px;
   --leo-typography-desktop-primary-h3-font-weight: 600;
   --leo-typography-desktop-primary-h3-letter-spacing: -1.6px;
   --leo-typography-desktop-primary-h3-line-height: 44px;
-  --leo-typography-desktop-primary-h3-paragraph-indent: 0;
-  --leo-typography-desktop-primary-h3-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-h3-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-h3-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-h4-font-size: 30px;
   --leo-typography-desktop-primary-h4-font-weight: 600;
   --leo-typography-desktop-primary-h4-letter-spacing: -1.2px;
   --leo-typography-desktop-primary-h4-line-height: 40px;
-  --leo-typography-desktop-primary-h4-paragraph-indent: 0;
-  --leo-typography-desktop-primary-h4-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-h4-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-h4-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-h5-font-size: 24px;
   --leo-typography-desktop-primary-h5-font-weight: 600;
   --leo-typography-desktop-primary-h5-letter-spacing: -0.48px;
   --leo-typography-desktop-primary-h5-line-height: 30px;
-  --leo-typography-desktop-primary-h5-paragraph-indent: 0;
-  --leo-typography-desktop-primary-h5-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-h5-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-h5-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-hero-font-size: 120px;
   --leo-typography-desktop-primary-hero-font-weight: 600;
   --leo-typography-desktop-primary-hero-letter-spacing: -4.8px;
   --leo-typography-desktop-primary-hero-line-height: 130px;
-  --leo-typography-desktop-primary-hero-paragraph-indent: 0;
-  --leo-typography-desktop-primary-hero-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-hero-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-hero-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-text-default-font-size: 20px;
   --leo-typography-desktop-primary-text-default-font-weight: 400;
-  --leo-typography-desktop-primary-text-default-letter-spacing: 0;
+  --leo-typography-desktop-primary-text-default-letter-spacing: 0px;
   --leo-typography-desktop-primary-text-default-line-height: 30px;
-  --leo-typography-desktop-primary-text-default-paragraph-indent: 0;
-  --leo-typography-desktop-primary-text-default-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-text-default-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-text-default-paragraph-spacing: 0px;
   --leo-typography-desktop-primary-text-small-font-size: 15px;
   --leo-typography-desktop-primary-text-small-font-weight: 700;
   --leo-typography-desktop-primary-text-small-letter-spacing: -0.45px;
   --leo-typography-desktop-primary-text-small-line-height: 20px;
-  --leo-typography-desktop-primary-text-small-paragraph-indent: 0;
-  --leo-typography-desktop-primary-text-small-paragraph-spacing: 0;
+  --leo-typography-desktop-primary-text-small-paragraph-indent: 0px;
+  --leo-typography-desktop-primary-text-small-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-h1-font-size: 100px;
   --leo-typography-desktop-secondary-h1-font-weight: 500;
   --leo-typography-desktop-secondary-h1-letter-spacing: -2px;
   --leo-typography-desktop-secondary-h1-line-height: 95px;
-  --leo-typography-desktop-secondary-h1-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-h1-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-h1-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-h1-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-h2-font-size: 80px;
   --leo-typography-desktop-secondary-h2-font-weight: 500;
   --leo-typography-desktop-secondary-h2-letter-spacing: -1.6px;
   --leo-typography-desktop-secondary-h2-line-height: 75px;
-  --leo-typography-desktop-secondary-h2-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-h2-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-h2-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-h2-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-h3-font-size: 70px;
   --leo-typography-desktop-secondary-h3-font-weight: 500;
   --leo-typography-desktop-secondary-h3-letter-spacing: -1.4px;
   --leo-typography-desktop-secondary-h3-line-height: 75px;
-  --leo-typography-desktop-secondary-h3-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-h3-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-h3-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-h3-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-h4-font-size: 40px;
   --leo-typography-desktop-secondary-h4-font-weight: 500;
   --leo-typography-desktop-secondary-h4-letter-spacing: -0.8px;
   --leo-typography-desktop-secondary-h4-line-height: 45px;
-  --leo-typography-desktop-secondary-h4-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-h4-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-h4-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-h4-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-h5-font-size: 30px;
   --leo-typography-desktop-secondary-h5-font-weight: 500;
   --leo-typography-desktop-secondary-h5-letter-spacing: -0.6px;
   --leo-typography-desktop-secondary-h5-line-height: 40px;
-  --leo-typography-desktop-secondary-h5-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-h5-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-h5-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-h5-paragraph-spacing: 0px;
   --leo-typography-desktop-secondary-hero-font-size: 120px;
   --leo-typography-desktop-secondary-hero-font-weight: 500;
   --leo-typography-desktop-secondary-hero-letter-spacing: -2.4px;
   --leo-typography-desktop-secondary-hero-line-height: 103px;
-  --leo-typography-desktop-secondary-hero-paragraph-indent: 0;
-  --leo-typography-desktop-secondary-hero-paragraph-spacing: 0;
+  --leo-typography-desktop-secondary-hero-paragraph-indent: 0px;
+  --leo-typography-desktop-secondary-hero-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-blockquote-font-size: 20px;
   --leo-typography-mobile-primary-blockquote-font-weight: 600;
   --leo-typography-mobile-primary-blockquote-letter-spacing: -0.4px;
   --leo-typography-mobile-primary-blockquote-line-height: 28px;
-  --leo-typography-mobile-primary-blockquote-paragraph-indent: 0;
-  --leo-typography-mobile-primary-blockquote-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-blockquote-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-blockquote-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-h1-font-size: 36px;
   --leo-typography-mobile-primary-h1-font-weight: 600;
   --leo-typography-mobile-primary-h1-letter-spacing: -1.44px;
   --leo-typography-mobile-primary-h1-line-height: 45px;
-  --leo-typography-mobile-primary-h1-paragraph-indent: 0;
-  --leo-typography-mobile-primary-h1-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-h1-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-h1-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-h2-font-size: 30px;
   --leo-typography-mobile-primary-h2-font-weight: 600;
   --leo-typography-mobile-primary-h2-letter-spacing: -1.2px;
   --leo-typography-mobile-primary-h2-line-height: 40px;
-  --leo-typography-mobile-primary-h2-paragraph-indent: 0;
-  --leo-typography-mobile-primary-h2-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-h2-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-h2-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-h3-font-size: 24px;
   --leo-typography-mobile-primary-h3-font-weight: 600;
   --leo-typography-mobile-primary-h3-letter-spacing: -0.96px;
   --leo-typography-mobile-primary-h3-line-height: 35px;
-  --leo-typography-mobile-primary-h3-paragraph-indent: 0;
-  --leo-typography-mobile-primary-h3-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-h3-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-h3-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-h4-font-size: 20px;
   --leo-typography-mobile-primary-h4-font-weight: 600;
   --leo-typography-mobile-primary-h4-letter-spacing: -0.8px;
   --leo-typography-mobile-primary-h4-line-height: 25px;
-  --leo-typography-mobile-primary-h4-paragraph-indent: 0;
-  --leo-typography-mobile-primary-h4-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-h4-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-h4-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-h5-font-size: 18px;
   --leo-typography-mobile-primary-h5-font-weight: 600;
   --leo-typography-mobile-primary-h5-letter-spacing: -0.72px;
   --leo-typography-mobile-primary-h5-line-height: 20px;
-  --leo-typography-mobile-primary-h5-paragraph-indent: 0;
-  --leo-typography-mobile-primary-h5-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-h5-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-h5-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-hero-font-size: 54px;
   --leo-typography-mobile-primary-hero-font-weight: 600;
   --leo-typography-mobile-primary-hero-letter-spacing: -2.16px;
   --leo-typography-mobile-primary-hero-line-height: 65px;
-  --leo-typography-mobile-primary-hero-paragraph-indent: 0;
-  --leo-typography-mobile-primary-hero-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-hero-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-hero-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-text-default-font-size: 18px;
   --leo-typography-mobile-primary-text-default-font-weight: 400;
-  --leo-typography-mobile-primary-text-default-letter-spacing: 0;
+  --leo-typography-mobile-primary-text-default-letter-spacing: 0px;
   --leo-typography-mobile-primary-text-default-line-height: 28px;
-  --leo-typography-mobile-primary-text-default-paragraph-indent: 0;
-  --leo-typography-mobile-primary-text-default-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-text-default-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-text-default-paragraph-spacing: 0px;
   --leo-typography-mobile-primary-text-small-font-size: 15px;
   --leo-typography-mobile-primary-text-small-font-weight: 700;
-  --leo-typography-mobile-primary-text-small-letter-spacing: 0;
+  --leo-typography-mobile-primary-text-small-letter-spacing: 0px;
   --leo-typography-mobile-primary-text-small-line-height: 20px;
-  --leo-typography-mobile-primary-text-small-paragraph-indent: 0;
-  --leo-typography-mobile-primary-text-small-paragraph-spacing: 0;
+  --leo-typography-mobile-primary-text-small-paragraph-indent: 0px;
+  --leo-typography-mobile-primary-text-small-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-h1-font-size: 40px;
   --leo-typography-mobile-secondary-h1-font-weight: 500;
   --leo-typography-mobile-secondary-h1-letter-spacing: -0.8px;
   --leo-typography-mobile-secondary-h1-line-height: 45px;
-  --leo-typography-mobile-secondary-h1-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-h1-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-h1-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-h1-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-h2-font-size: 36px;
   --leo-typography-mobile-secondary-h2-font-weight: 500;
   --leo-typography-mobile-secondary-h2-letter-spacing: -0.72px;
   --leo-typography-mobile-secondary-h2-line-height: 40px;
-  --leo-typography-mobile-secondary-h2-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-h2-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-h2-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-h2-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-h3-font-size: 30px;
   --leo-typography-mobile-secondary-h3-font-weight: 500;
   --leo-typography-mobile-secondary-h3-letter-spacing: -0.6px;
   --leo-typography-mobile-secondary-h3-line-height: 30px;
-  --leo-typography-mobile-secondary-h3-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-h3-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-h3-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-h3-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-h4-font-size: 24px;
   --leo-typography-mobile-secondary-h4-font-weight: 500;
   --leo-typography-mobile-secondary-h4-letter-spacing: -0.48px;
   --leo-typography-mobile-secondary-h4-line-height: 30px;
-  --leo-typography-mobile-secondary-h4-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-h4-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-h4-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-h4-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-h5-font-size: 20px;
   --leo-typography-mobile-secondary-h5-font-weight: 500;
   --leo-typography-mobile-secondary-h5-letter-spacing: -0.4px;
   --leo-typography-mobile-secondary-h5-line-height: 25px;
-  --leo-typography-mobile-secondary-h5-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-h5-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-h5-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-h5-paragraph-spacing: 0px;
   --leo-typography-mobile-secondary-hero-font-size: 54px;
   --leo-typography-mobile-secondary-hero-font-weight: 500;
   --leo-typography-mobile-secondary-hero-letter-spacing: -1.08px;
   --leo-typography-mobile-secondary-hero-line-height: 50px;
-  --leo-typography-mobile-secondary-hero-paragraph-indent: 0;
-  --leo-typography-mobile-secondary-hero-paragraph-spacing: 0;
+  --leo-typography-mobile-secondary-hero-paragraph-indent: 0px;
+  --leo-typography-mobile-secondary-hero-paragraph-spacing: 0px;
 }
 
 @media (prefers-color-scheme: light) {
Variables Diff: variables-news.diff 
--- ./tokens/css/variables-news.old.css	2025-04-11 00:15:35.618306432 +0000
+++ ./tokens/css/variables-news.css	2025-04-11 00:15:04.570146627 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Wed Apr 09 2025 19:26:34 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 11 Apr 2025 00:15:04 GMT
  */
 
 :root {
Variables Diff: variables-newtab.diff 
--- ./tokens/css/variables-newtab.old.css	2025-04-11 00:15:35.838307493 +0000
+++ ./tokens/css/variables-newtab.css	2025-04-11 00:15:05.019148937 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Wed Apr 09 2025 19:26:34 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 11 Apr 2025 00:15:05 GMT
  */
 
 :root {
@@ -11,26 +11,26 @@
   --leo-gradient-ntp-overlay: linear-gradient(359.99997954866785deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 36%, rgba(0, 0, 0, 0) 80%, rgba(0, 0, 0, 0.5) 100%);
   --leo-typography-brave-rewards-widget-progress-font-size: 24px;
   --leo-typography-brave-rewards-widget-progress-font-weight: 400;
-  --leo-typography-brave-rewards-widget-progress-letter-spacing: 0;
+  --leo-typography-brave-rewards-widget-progress-letter-spacing: 0px;
   --leo-typography-brave-rewards-widget-progress-line-height: 24px;
-  --leo-typography-brave-rewards-widget-progress-paragraph-indent: 0;
-  --leo-typography-brave-rewards-widget-progress-paragraph-spacing: 0;
+  --leo-typography-brave-rewards-widget-progress-paragraph-indent: 0px;
+  --leo-typography-brave-rewards-widget-progress-paragraph-spacing: 0px;
   --leo-typography-brave-rewards-widget-token-balance-font-size: 36px;
   --leo-typography-brave-rewards-widget-token-balance-font-weight: 400;
-  --leo-typography-brave-rewards-widget-token-balance-letter-spacing: 0;
+  --leo-typography-brave-rewards-widget-token-balance-letter-spacing: 0px;
   --leo-typography-brave-rewards-widget-token-balance-line-height: 36px;
-  --leo-typography-brave-rewards-widget-token-balance-paragraph-indent: 0;
-  --leo-typography-brave-rewards-widget-token-balance-paragraph-spacing: 0;
+  --leo-typography-brave-rewards-widget-token-balance-paragraph-indent: 0px;
+  --leo-typography-brave-rewards-widget-token-balance-paragraph-spacing: 0px;
   --leo-typography-stats-h2-font-size: 40px;
   --leo-typography-stats-h2-font-weight: 400;
-  --leo-typography-stats-h2-letter-spacing: 0;
+  --leo-typography-stats-h2-letter-spacing: 0px;
   --leo-typography-stats-h2-line-height: 40px;
-  --leo-typography-stats-h2-paragraph-indent: 0;
-  --leo-typography-stats-h2-paragraph-spacing: 0;
+  --leo-typography-stats-h2-paragraph-indent: 0px;
+  --leo-typography-stats-h2-paragraph-spacing: 0px;
   --leo-typography-stats-h3-font-size: 20px;
   --leo-typography-stats-h3-font-weight: 500;
-  --leo-typography-stats-h3-letter-spacing: 0;
+  --leo-typography-stats-h3-letter-spacing: 0px;
   --leo-typography-stats-h3-line-height: 24px;
-  --leo-typography-stats-h3-paragraph-indent: 0;
-  --leo-typography-stats-h3-paragraph-spacing: 0;
+  --leo-typography-stats-h3-paragraph-indent: 0px;
+  --leo-typography-stats-h3-paragraph-spacing: 0px;
 }
Variables Diff: variables-search.diff 
--- ./tokens/css/variables-search.old.css	2025-04-11 00:15:36.086308690 +0000
+++ ./tokens/css/variables-search.css	2025-04-11 00:15:04.108144275 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Wed Apr 09 2025 19:26:34 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 11 Apr 2025 00:15:04 GMT
  */
 
 :root {
@@ -14,32 +14,32 @@
   --leo-gradient-search-navigation: linear-gradient(307.16553222317134deg, rgb(191, 20, 162) 0%, rgb(247, 58, 28) 100%);
   --leo-typography-heading-h5-font-size: 20px;
   --leo-typography-heading-h5-font-weight: 600;
-  --leo-typography-heading-h5-letter-spacing: 0;
+  --leo-typography-heading-h5-letter-spacing: 0px;
   --leo-typography-heading-h5-line-height: 26px;
-  --leo-typography-heading-h5-paragraph-indent: 0;
-  --leo-typography-heading-h5-paragraph-spacing: 0;
+  --leo-typography-heading-h5-paragraph-indent: 0px;
+  --leo-typography-heading-h5-paragraph-spacing: 0px;
   --leo-typography-heading-serpresult-font-size: 18px;
   --leo-typography-heading-serpresult-font-weight: 400;
-  --leo-typography-heading-serpresult-letter-spacing: 0;
+  --leo-typography-heading-serpresult-letter-spacing: 0px;
   --leo-typography-heading-serpresult-line-height: 26px;
-  --leo-typography-heading-serpresult-paragraph-indent: 0;
-  --leo-typography-heading-serpresult-paragraph-spacing: 0;
+  --leo-typography-heading-serpresult-paragraph-indent: 0px;
+  --leo-typography-heading-serpresult-paragraph-spacing: 0px;
   --leo-typography-text-small-bold-font-size: 13px;
   --leo-typography-text-small-bold-font-weight: 600;
   --leo-typography-text-small-bold-letter-spacing: -0.2px;
   --leo-typography-text-small-bold-line-height: 21px;
-  --leo-typography-text-small-bold-paragraph-indent: 0;
-  --leo-typography-text-small-bold-paragraph-spacing: 0;
+  --leo-typography-text-small-bold-paragraph-indent: 0px;
+  --leo-typography-text-small-bold-paragraph-spacing: 0px;
   --leo-typography-text-small-link-font-size: 13px;
   --leo-typography-text-small-link-font-weight: 600;
   --leo-typography-text-small-link-letter-spacing: -0.2px;
   --leo-typography-text-small-link-line-height: 21px;
-  --leo-typography-text-small-link-paragraph-indent: 0;
-  --leo-typography-text-small-link-paragraph-spacing: 0;
+  --leo-typography-text-small-link-paragraph-indent: 0px;
+  --leo-typography-text-small-link-paragraph-spacing: 0px;
   --leo-typography-text-small-regular-font-size: 13px;
   --leo-typography-text-small-regular-font-weight: 400;
   --leo-typography-text-small-regular-letter-spacing: -0.2px;
   --leo-typography-text-small-regular-line-height: 21px;
-  --leo-typography-text-small-regular-paragraph-indent: 0;
-  --leo-typography-text-small-regular-paragraph-spacing: 0;
+  --leo-typography-text-small-regular-paragraph-indent: 0px;
+  --leo-typography-text-small-regular-paragraph-spacing: 0px;
 }
Variables Diff: variables-web3.diff 
--- ./tokens/css/variables-web3.old.css	2025-04-11 00:15:36.305309744 +0000
+++ ./tokens/css/variables-web3.css	2025-04-11 00:15:05.460151206 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Wed Apr 09 2025 19:26:34 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 11 Apr 2025 00:15:05 GMT
  */
 
 @media (prefers-color-scheme: light) {
Variables Diff: variables.diff 
--- ./tokens/css/variables.old.css	2025-04-11 00:15:36.744311845 +0000
+++ ./tokens/css/variables.css	2025-04-11 00:15:00.048124503 +0000
@@ -1,6 +1,6 @@
 /**
- * Do not edit directly
- * Generated on Wed Apr 09 2025 19:26:34 GMT+0000 (Coordinated Universal Time)
+ * Do not edit directly, this file was auto-generated.
+ * Generated on Fri, 11 Apr 2025 00:15:00 GMT
  */
 
 :root {
@@ -432,112 +432,112 @@
   --leo-typography-android-size-x-small: 11px;
   --leo-typography-components-button-default-font-size: 14px;
   --leo-typography-components-button-default-font-weight: 600;
-  --leo-typography-components-button-default-letter-spacing: 0;
+  --leo-typography-components-button-default-letter-spacing: 0px;
   --leo-typography-components-button-default-line-height: 20px;
-  --leo-typography-components-button-default-paragraph-indent: 0;
-  --leo-typography-components-button-default-paragraph-spacing: 0;
+  --leo-typography-components-button-default-paragraph-indent: 0px;
+  --leo-typography-components-button-default-paragraph-spacing: 0px;
   --leo-typography-components-button-jumbo-font-size: 18px;
   --leo-typography-components-button-jumbo-font-weight: 600;
-  --leo-typography-components-button-jumbo-letter-spacing: 0;
+  --leo-typography-components-button-jumbo-letter-spacing: 0px;
   --leo-typography-components-button-jumbo-line-height: 24px;
-  --leo-typography-components-button-jumbo-paragraph-indent: 0;
-  --leo-typography-components-button-jumbo-paragraph-spacing: 0;
+  --leo-typography-components-button-jumbo-paragraph-indent: 0px;
+  --leo-typography-components-button-jumbo-paragraph-spacing: 0px;
   --leo-typography-components-button-large-font-size: 16px;
   --leo-typography-components-button-large-font-weight: 600;
-  --leo-typography-components-button-large-letter-spacing: 0;
+  --leo-typography-components-button-large-letter-spacing: 0px;
   --leo-typography-components-button-large-line-height: 22px;
-  --leo-typography-components-button-large-paragraph-indent: 0;
-  --leo-typography-components-button-large-paragraph-spacing: 0;
+  --leo-typography-components-button-large-paragraph-indent: 0px;
+  --leo-typography-components-button-large-paragraph-spacing: 0px;
   --leo-typography-components-button-small-font-size: 12px;
   --leo-typography-components-button-small-font-weight: 600;
-  --leo-typography-components-button-small-letter-spacing: 0;
+  --leo-typography-components-button-small-letter-spacing: 0px;
   --leo-typography-components-button-small-line-height: 18px;
-  --leo-typography-components-button-small-paragraph-indent: 0;
-  --leo-typography-components-button-small-paragraph-spacing: 0;
+  --leo-typography-components-button-small-paragraph-indent: 0px;
+  --leo-typography-components-button-small-paragraph-spacing: 0px;
   --leo-typography-components-label-font-size: 10px;
   --leo-typography-components-label-font-weight: 700;
-  --leo-typography-components-label-letter-spacing: 0;
+  --leo-typography-components-label-letter-spacing: 0px;
   --leo-typography-components-label-line-height: 10px;
-  --leo-typography-components-label-paragraph-indent: 0;
-  --leo-typography-components-label-paragraph-spacing: 0;
+  --leo-typography-components-label-paragraph-indent: 0px;
+  --leo-typography-components-label-paragraph-spacing: 0px;
   --leo-typography-components-navbutton-font-size: 14px;
   --leo-typography-components-navbutton-font-weight: 600;
-  --leo-typography-components-navbutton-letter-spacing: 0;
+  --leo-typography-components-navbutton-letter-spacing: 0px;
   --leo-typography-components-navbutton-line-height: 22px;
-  --leo-typography-components-navbutton-paragraph-indent: 0;
-  --leo-typography-components-navbutton-paragraph-spacing: 0;
+  --leo-typography-components-navbutton-paragraph-indent: 0px;
+  --leo-typography-components-navbutton-paragraph-spacing: 0px;
   --leo-typography-components-numbers-large-font-size: 36px;
   --leo-typography-components-numbers-large-font-weight: 600;
   --leo-typography-components-numbers-large-letter-spacing: -0.72px;
   --leo-typography-components-numbers-large-line-height: 46px;
-  --leo-typography-components-numbers-large-paragraph-indent: 0;
-  --leo-typography-components-numbers-large-paragraph-spacing: 0;
+  --leo-typography-components-numbers-large-paragraph-indent: 0px;
+  --leo-typography-components-numbers-large-paragraph-spacing: 0px;
   --leo-typography-components-tableheader-font-size: 13px;
   --leo-typography-components-tableheader-font-weight: 600;
-  --leo-typography-components-tableheader-letter-spacing: 0;
+  --leo-typography-components-tableheader-letter-spacing: 0px;
   --leo-typography-components-tableheader-line-height: 16px;
-  --leo-typography-components-tableheader-paragraph-indent: 0;
-  --leo-typography-components-tableheader-paragraph-spacing: 0;
+  --leo-typography-components-tableheader-paragraph-indent: 0px;
+  --leo-typography-components-tableheader-paragraph-spacing: 0px;
   --leo-typography-default-link-font-size: 14px;
   --leo-typography-default-link-font-weight: 400;
-  --leo-typography-default-link-letter-spacing: 0;
+  --leo-typography-default-link-letter-spacing: 0px;
   --leo-typography-default-link-line-height: 22px;
-  --leo-typography-default-link-paragraph-indent: 0;
+  --leo-typography-default-link-paragraph-indent: 0px;
   --leo-typography-default-link-paragraph-spacing: 8px;
   --leo-typography-default-regular-font-size: 14px;
   --leo-typography-default-regular-font-weight: 400;
-  --leo-typography-default-regular-letter-spacing: 0;
+  --leo-typography-default-regular-letter-spacing: 0px;
   --leo-typography-default-regular-line-height: 22px;
-  --leo-typography-default-regular-paragraph-indent: 0;
+  --leo-typography-default-regular-paragraph-indent: 0px;
   --leo-typography-default-regular-paragraph-spacing: 8px;
   --leo-typography-default-semibold-font-size: 14px;
   --leo-typography-default-semibold-font-weight: 600;
-  --leo-typography-default-semibold-letter-spacing: 0;
+  --leo-typography-default-semibold-letter-spacing: 0px;
   --leo-typography-default-semibold-line-height: 22px;
-  --leo-typography-default-semibold-paragraph-indent: 0;
+  --leo-typography-default-semibold-paragraph-indent: 0px;
   --leo-typography-default-semibold-paragraph-spacing: 8px;
   --leo-typography-heading-display1-font-size: 46px;
   --leo-typography-heading-display1-font-weight: 600;
   --leo-typography-heading-display1-letter-spacing: -0.5px;
   --leo-typography-heading-display1-line-height: 54px;
-  --leo-typography-heading-display1-paragraph-indent: 0;
-  --leo-typography-heading-display1-paragraph-spacing: 0;
+  --leo-typography-heading-display1-paragraph-indent: 0px;
+  --leo-typography-heading-display1-paragraph-spacing: 0px;
   --leo-typography-heading-display2-font-size: 40px;
   --leo-typography-heading-display2-font-weight: 600;
   --leo-typography-heading-display2-letter-spacing: -0.5px;
   --leo-typography-heading-display2-line-height: 48px;
-  --leo-typography-heading-display2-paragraph-indent: 0;
-  --leo-typography-heading-display2-paragraph-spacing: 0;
+  --leo-typography-heading-display2-paragraph-indent: 0px;
+  --leo-typography-heading-display2-paragraph-spacing: 0px;
   --leo-typography-heading-display3-font-size: 34px;
   --leo-typography-heading-display3-font-weight: 600;
   --leo-typography-heading-display3-letter-spacing: -0.5px;
   --leo-typography-heading-display3-line-height: 40px;
-  --leo-typography-heading-display3-paragraph-indent: 0;
-  --leo-typography-heading-display3-paragraph-spacing: 0;
+  --leo-typography-heading-display3-paragraph-indent: 0px;
+  --leo-typography-heading-display3-paragraph-spacing: 0px;
   --leo-typography-heading-h1-font-size: 32px;
   --leo-typography-heading-h1-font-weight: 600;
   --leo-typography-heading-h1-letter-spacing: -0.5px;
   --leo-typography-heading-h1-line-height: 42px;
-  --leo-typography-heading-h1-paragraph-indent: 0;
-  --leo-typography-heading-h1-paragraph-spacing: 0;
+  --leo-typography-heading-h1-paragraph-indent: 0px;
+  --leo-typography-heading-h1-paragraph-spacing: 0px;
   --leo-typography-heading-h2-font-size: 28px;
   --leo-typography-heading-h2-font-weight: 600;
   --leo-typography-heading-h2-letter-spacing: -0.5px;
   --leo-typography-heading-h2-line-height: 36px;
-  --leo-typography-heading-h2-paragraph-indent: 0;
-  --leo-typography-heading-h2-paragraph-spacing: 0;
+  --leo-typography-heading-h2-paragraph-indent: 0px;
+  --leo-typography-heading-h2-paragraph-spacing: 0px;
   --leo-typography-heading-h3-font-size: 22px;
   --leo-typography-heading-h3-font-weight: 600;
   --leo-typography-heading-h3-letter-spacing: -0.5px;
   --leo-typography-heading-h3-line-height: 28px;
-  --leo-typography-heading-h3-paragraph-indent: 0;
-  --leo-typography-heading-h3-paragraph-spacing: 0;
+  --leo-typography-heading-h3-paragraph-indent: 0px;
+  --leo-typography-heading-h3-paragraph-spacing: 0px;
   --leo-typography-heading-h4-font-size: 16px;
   --leo-typography-heading-h4-font-weight: 600;
-  --leo-typography-heading-h4-letter-spacing: 0;
+  --leo-typography-heading-h4-letter-spacing: 0px;
   --leo-typography-heading-h4-line-height: 26px;
-  --leo-typography-heading-h4-paragraph-indent: 0;
-  --leo-typography-heading-h4-paragraph-spacing: 0;
+  --leo-typography-heading-h4-paragraph-indent: 0px;
+  --leo-typography-heading-h4-paragraph-spacing: 0px;
   --leo-typography-ios-letter-spacing-button: -0.4000000059604645px;
   --leo-typography-ios-letter-spacing-default: -0.23000000417232513px;
   --leo-typography-ios-letter-spacing-headings: -0.25999999046325684px;
@@ -584,21 +584,21 @@
   --leo-typography-ios-size-x-small: 11px;
   --leo-typography-large-link-font-size: 16px;
   --leo-typography-large-link-font-weight: 400;
-  --leo-typography-large-link-letter-spacing: 0;
+  --leo-typography-large-link-letter-spacing: 0px;
   --leo-typography-large-link-line-height: 24px;
-  --leo-typography-large-link-paragraph-indent: 0;
+  --leo-typography-large-link-paragraph-indent: 0px;
   --leo-typography-large-link-paragraph-spacing: 8px;
   --leo-typography-large-regular-font-size: 16px;
   --leo-typography-large-regular-font-weight: 400;
-  --leo-typography-large-regular-letter-spacing: 0;
+  --leo-typography-large-regular-letter-spacing: 0px;
   --leo-typography-large-regular-line-height: 24px;
-  --leo-typography-large-regular-paragraph-indent: 0;
+  --leo-typography-large-regular-paragraph-indent: 0px;
   --leo-typography-large-regular-paragraph-spacing: 8px;
   --leo-typography-large-semibold-font-size: 16px;
   --leo-typography-large-semibold-font-weight: 600;
-  --leo-typography-large-semibold-letter-spacing: 0;
+  --leo-typography-large-semibold-letter-spacing: 0px;
   --leo-typography-large-semibold-line-height: 24px;
-  --leo-typography-large-semibold-paragraph-indent: 0;
+  --leo-typography-large-semibold-paragraph-indent: 0px;
   --leo-typography-large-semibold-paragraph-spacing: 8px;
   --leo-typography-letter-spacing-button: 0px;
   --leo-typography-letter-spacing-default: 0px;
@@ -670,22 +670,22 @@
   --leo-typography-mobile-size-x-small: 11px;
   --leo-typography-monospace-default-font-size: 14px;
   --leo-typography-monospace-default-font-weight: 400;
-  --leo-typography-monospace-default-letter-spacing: 0;
+  --leo-typography-monospace-default-letter-spacing: 0px;
   --leo-typography-monospace-default-line-height: 22px;
-  --leo-typography-monospace-default-paragraph-indent: 0;
-  --leo-typography-monospace-default-paragraph-spacing: 0;
+  --leo-typography-monospace-default-paragraph-indent: 0px;
+  --leo-typography-monospace-default-paragraph-spacing: 0px;
   --leo-typography-monospace-large-font-size: 16px;
   --leo-typography-monospace-large-font-weight: 400;
-  --leo-typography-monospace-large-letter-spacing: 0;
+  --leo-typography-monospace-large-letter-spacing: 0px;
   --leo-typography-monospace-large-line-height: 24px;
-  --leo-typography-monospace-large-paragraph-indent: 0;
-  --leo-typography-monospace-large-paragraph-spacing: 0;
+  --leo-typography-monospace-large-paragraph-indent: 0px;
+  --leo-typography-monospace-large-paragraph-spacing: 0px;
   --leo-typography-monospace-small-font-size: 12px;
   --leo-typography-monospace-small-font-weight: 400;
-  --leo-typography-monospace-small-letter-spacing: 0;
+  --leo-typography-monospace-small-letter-spacing: 0px;
   --leo-typography-monospace-small-line-height: 18px;
-  --leo-typography-monospace-small-paragraph-indent: 0;
-  --leo-typography-monospace-small-paragraph-spacing: 0;
+  --leo-typography-monospace-small-paragraph-indent: 0px;
+  --leo-typography-monospace-small-paragraph-spacing: 0px;
   --leo-typography-paragraph-spacing-default: 8px;
   --leo-typography-size-button-default: 14px;
   --leo-typography-size-button-jumbo: 18px;
@@ -708,39 +708,39 @@
   --leo-typography-size-x-small: 11px;
   --leo-typography-small-link-font-size: 12px;
   --leo-typography-small-link-font-weight: 400;
-  --leo-typography-small-link-letter-spacing: 0;
+  --leo-typography-small-link-letter-spacing: 0px;
   --leo-typography-small-link-line-height: 18px;
-  --leo-typography-small-link-paragraph-indent: 0;
+  --leo-typography-small-link-paragraph-indent: 0px;
   --leo-typography-small-link-paragraph-spacing: 8px;
   --leo-typography-small-regular-font-size: 12px;
   --leo-typography-small-regular-font-weight: 400;
-  --leo-typography-small-regular-letter-spacing: 0;
+  --leo-typography-small-regular-letter-spacing: 0px;
   --leo-typography-small-regular-line-height: 18px;
-  --leo-typography-small-regular-paragraph-indent: 0;
+  --leo-typography-small-regular-paragraph-indent: 0px;
   --leo-typography-small-regular-paragraph-spacing: 8px;
   --leo-typography-small-semibold-font-size: 12px;
   --leo-typography-small-semibold-font-weight: 600;
-  --leo-typography-small-semibold-letter-spacing: 0;
+  --leo-typography-small-semibold-letter-spacing: 0px;
   --leo-typography-small-semibold-line-height: 18px;
-  --leo-typography-small-semibold-paragraph-indent: 0;
+  --leo-typography-small-semibold-paragraph-indent: 0px;
   --leo-typography-small-semibold-paragraph-spacing: 8px;
   --leo-typography-x-small-link-font-size: 11px;
   --leo-typography-x-small-link-font-weight: 400;
-  --leo-typography-x-small-link-letter-spacing: 0;
+  --leo-typography-x-small-link-letter-spacing: 0px;
   --leo-typography-x-small-link-line-height: 16px;
-  --leo-typography-x-small-link-paragraph-indent: 0;
+  --leo-typography-x-small-link-paragraph-indent: 0px;
   --leo-typography-x-small-link-paragraph-spacing: 8px;
   --leo-typography-x-small-regular-font-size: 11px;
   --leo-typography-x-small-regular-font-weight: 400;
-  --leo-typography-x-small-regular-letter-spacing: 0;
+  --leo-typography-x-small-regular-letter-spacing: 0px;
   --leo-typography-x-small-regular-line-height: 16px;
-  --leo-typography-x-small-regular-paragraph-indent: 0;
+  --leo-typography-x-small-regular-paragraph-indent: 0px;
   --leo-typography-x-small-regular-paragraph-spacing: 8px;
   --leo-typography-x-small-semibold-font-size: 11px;
   --leo-typography-x-small-semibold-font-weight: 600;
-  --leo-typography-x-small-semibold-letter-spacing: 0;
+  --leo-typography-x-small-semibold-letter-spacing: 0px;
   --leo-typography-x-small-semibold-line-height: 16px;
-  --leo-typography-x-small-semibold-paragraph-indent: 0;
+  --leo-typography-x-small-semibold-paragraph-indent: 0px;
   --leo-typography-x-small-semibold-paragraph-spacing: 8px;
 }
 
@@ -843,10 +843,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.12);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-100);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-100);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 35px;
+  --leo-color-material-blur-thick: 30px;
+  --leo-color-material-blur-thin: 30px;
+  --leo-color-material-blur-ultrathin: 30px;
   --leo-color-material-divider: rgba(17, 17, 17, 0.25);
   --leo-color-material-regular: rgba(255, 255, 255, 0.73);
   --leo-color-material-separator: rgba(0, 0, 0, 0.08);
@@ -1129,10 +1129,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.24);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-10);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-10);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 100px;
+  --leo-color-material-blur-thick: 100px;
+  --leo-color-material-blur-thin: 100px;
+  --leo-color-material-blur-ultrathin: 100px;
   --leo-color-material-divider: rgba(255, 255, 255, 0.2);
   --leo-color-material-regular: rgba(37, 37, 37, 0.75);
   --leo-color-material-separator: rgba(0, 0, 0, 0.16);
@@ -1446,10 +1446,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.12);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-100);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-100);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 35px;
+  --leo-color-material-blur-thick: 30px;
+  --leo-color-material-blur-thin: 30px;
+  --leo-color-material-blur-ultrathin: 30px;
   --leo-color-material-divider: rgba(17, 17, 17, 0.25);
   --leo-color-material-regular: rgba(255, 255, 255, 0.73);
   --leo-color-material-separator: rgba(0, 0, 0, 0.08);
@@ -1730,10 +1730,10 @@
   --leo-color-ios-browser-container-highlight-ios: rgba(118, 118, 128, 0.24);
   --leo-color-ios-browser-elevated-ios: var(--leo-color-primitive-neutral-10);
   --leo-color-ios-browser-omnibar-background: var(--leo-color-primitive-neutral-10);
-  --leo-color-material-blur-regular: #000000px;
-  --leo-color-material-blur-thick: #000000px;
-  --leo-color-material-blur-thin: #000000px;
-  --leo-color-material-blur-ultrathin: #000000px;
+  --leo-color-material-blur-regular: 100px;
+  --leo-color-material-blur-thick: 100px;
+  --leo-color-material-blur-thin: 100px;
+  --leo-color-material-blur-ultrathin: 100px;
   --leo-color-material-divider: rgba(255, 255, 255, 0.2);
   --leo-color-material-regular: rgba(37, 37, 37, 0.75);
   --leo-color-material-separator: rgba(0, 0, 0, 0.16);

@AlanBreck
Copy link
Collaborator Author

Moving this back to draft mode as I've got to resolve some breaking diffs when comparing the output from the way it currently is to this PR's output.

@AlanBreck AlanBreck marked this pull request as draft April 11, 2025 18:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@fallaciousreasoning fallaciousreasoning fallaciousreasoning approved these changes

@petemill petemill Awaiting requested review from petemill petemill is a code owner

Assignees
No one assigned
Labels
puLL-Merge
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@AlanBreck @fallaciousreasoning