[Tokens]: Update non-universal platform tokens from Figma#1333
[Tokens]: Update non-universal platform tokens from Figma#1333aguscruiz wants to merge 7 commits into
Conversation
Sync latest token definitions for Android, iOS, browser, marketing, search, newtab, and AI. Adds marketing.variables.json. Major structural changes include flattened Android font tokens (removed size-based grouping), updated iOS and marketing token hierarchies, and minor AI gradient color adjustments. Made-with: Cursor
Browser font tokens no longer have large/default/small/xSmall sub-groups after the Figma sync. Remove the invalid stories from browserFontTokens.stories and add a null guard in FontTokenSwatchGroup so getTokens returns an empty array instead of throwing when tokens are undefined. Made-with: Cursor
The Figma token source uses SF Pro (Apple fonts) for all platforms. The web pipeline already maps these to system-ui, but the Android formatter was emitting them as-is, producing invalid @font/sf_pro_text references. Add androidFontFamily() to fontHelper.ts that maps: - SF Pro variants -> Google Sans Flex - SF Mono -> Google Sans Code Use it in the Android fontStyle formatter so generated styles.xml references the correct Android font resources. Made-with: Cursor
The web font resolver mapped SF Pro to a system-ui stack but left SF Mono as-is, which only resolves on macOS. Add a cross-platform monospace fallback: 'SF Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace. Made-with: Cursor
|
can you run |
Done! |
DescriptionThis PR is a major design token update for the Brave Leo design system. It restructures and updates font/typography tokens across multiple platforms (Android, iOS, browser, marketing, new tab, search), updates color values in AI and search tokens, fixes a null-safety issue in the font token story helper, and adds a monospace font stack fallback. Key changes include:
Possible Issues
ChangesChanges
sequenceDiagram
participant Figma as Figma Design Tool
participant Tokens as Token JSON Files
participant Helper as fontHelper.ts
participant Android as Android Format
participant CSS as CSS Output
Figma->>Tokens: Export updated design tokens
Note over Tokens: android.tokens.json<br/>ios.tokens.json<br/>browser.tokens.json<br/>marketing.tokens.json<br/>newtab.tokens.json<br/>search.tokens/variables.json
Tokens->>Helper: Font family resolution
Helper->>Helper: isSFPro() → system-ui stack
Helper->>Helper: isSFMono() → monospace stack
Helper->>Helper: androidFontFamily() → Google Sans Flex/Code
Tokens->>Android: Android style dictionary build
Android->>Helper: androidFontFamily(value)
Helper-->>Android: "Google Sans Flex" / "Google Sans Code"
Android->>Android: Generate XML resources
Tokens->>CSS: CSS style dictionary build
CSS->>Helper: fontFamily(value)
Helper-->>CSS: system-ui stack / monospace stack
CSS->>CSS: Generate CSS variables
|
|
👋 Thanks for Submitting! This PR is available for preview at the link below. ✅ PR tip preview: https://1333.pr.nala.bravesoftware.com/ - ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 1850 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 1438 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 16941 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 21083 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: 2119 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 26939 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 126006 bytes
+ ./tokens/css/variables.css: 126306 bytes
Variables Diff: variables-android.diff--- ./tokens/css/variables-android.old.css 2026-03-11 20:30:36.092681172 +0000
+++ ./tokens/css/variables-android.css 2026-03-11 20:30:00.385031541 +0000
@@ -1,126 +1,45 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:30:00 GMT+0000 (Coordinated Universal Time)
*/
:root {
- --leo-font-android-default-regular: 400 14px/20px Roboto;
- --leo-font-android-default-semibold: 600 14px/20px Roboto;
- --leo-font-android-heading-display1: 500 45px/52px Roboto;
- --leo-font-android-heading-display2: 500 36px/44px Roboto;
- --leo-font-android-heading-h1: 500 32px/40px Roboto;
- --leo-font-android-heading-h2: 500 28px/36px Roboto;
- --leo-font-android-heading-h3: 500 22px/28px Roboto;
- --leo-font-android-heading-h4: 600 16px/24px Roboto;
- --leo-font-android-large-regular: 400 16px/24px Roboto;
- --leo-font-android-large-semibold: 600 16px/24px Roboto;
- --leo-font-android-monospace-default: 400 14px/20px Roboto Mono;
- --leo-font-android-monospace-large: 400 16px/24px Roboto Mono;
- --leo-font-android-monospace-small: 400 12px/16px Roboto Mono;
- --leo-font-android-small-regular: 400 12px/16px Roboto;
- --leo-font-android-small-semibold: 600 12px/16px Roboto;
- --leo-font-android-x-small-regular: 400 11px/16px Roboto;
- --leo-font-android-x-small-semibold: 600 11px/16px Roboto;
- --leo-typography-android-default-regular-font-size: 14px;
- --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-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-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-line-height: 52px;
- --leo-typography-android-heading-display1-paragraph-indent: 0;
- --leo-typography-android-heading-display1-paragraph-spacing: 0;
- --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-line-height: 44px;
- --leo-typography-android-heading-display2-paragraph-indent: 0;
- --leo-typography-android-heading-display2-paragraph-spacing: 0;
- --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-line-height: 40px;
- --leo-typography-android-heading-h1-paragraph-indent: 0;
- --leo-typography-android-heading-h1-paragraph-spacing: 0;
- --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-line-height: 36px;
- --leo-typography-android-heading-h2-paragraph-indent: 0;
- --leo-typography-android-heading-h2-paragraph-spacing: 0;
- --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-line-height: 28px;
- --leo-typography-android-heading-h3-paragraph-indent: 0;
- --leo-typography-android-heading-h3-paragraph-spacing: 0;
- --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-line-height: 24px;
- --leo-typography-android-heading-h4-paragraph-indent: 0;
- --leo-typography-android-heading-h4-paragraph-spacing: 0;
- --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-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-line-height: 24px;
- --leo-typography-android-large-semibold-paragraph-indent: 0;
- --leo-typography-android-large-semibold-paragraph-spacing: 0;
- --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-line-height: 20px;
- --leo-typography-android-monospace-default-paragraph-indent: 0;
- --leo-typography-android-monospace-default-paragraph-spacing: 0;
- --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-line-height: 24px;
- --leo-typography-android-monospace-large-paragraph-indent: 0;
- --leo-typography-android-monospace-large-paragraph-spacing: 0;
- --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-line-height: 16px;
- --leo-typography-android-monospace-small-paragraph-indent: 0;
- --leo-typography-android-monospace-small-paragraph-spacing: 0;
- --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-line-height: 16px;
- --leo-typography-android-small-regular-paragraph-indent: 0;
- --leo-typography-android-small-regular-paragraph-spacing: 0;
- --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-line-height: 16px;
- --leo-typography-android-small-semibold-paragraph-indent: 0;
- --leo-typography-android-small-semibold-paragraph-spacing: 0;
- --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-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-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-line-height: 16px;
- --leo-typography-android-x-small-semibold-paragraph-indent: 0;
- --leo-typography-android-x-small-semibold-paragraph-spacing: 0;
+ --leo-font-top-app-bar-default: 400 20px/26px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-top-app-bar-large: 400 22px/28px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-typography-top-app-bar-default-font-size: 20px;
+ --leo-typography-top-app-bar-default-font-weight: 400;
+ --leo-typography-top-app-bar-default-letter-spacing: 0;
+ --leo-typography-top-app-bar-default-line-height: 26px;
+ --leo-typography-top-app-bar-default-paragraph-indent: 0;
+ --leo-typography-top-app-bar-default-paragraph-spacing: 0;
+ --leo-typography-top-app-bar-large-font-size: 22px;
+ --leo-typography-top-app-bar-large-font-weight: 400;
+ --leo-typography-top-app-bar-large-letter-spacing: 0;
+ --leo-typography-top-app-bar-large-line-height: 28px;
+ --leo-typography-top-app-bar-large-paragraph-indent: 0;
+ --leo-typography-top-app-bar-large-paragraph-spacing: 0;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ --leo-effect-shadow-bottom-sheet-0: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
+ --leo-effect-shadow-bottom-sheet-1: 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --leo-effect-shadow-bottom-sheet-0: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
+ --leo-effect-shadow-bottom-sheet-1: 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+ }
+}
+
+[data-theme="light"] {
+ --leo-effect-shadow-bottom-sheet-0: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
+ --leo-effect-shadow-bottom-sheet-1: 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+}
+
+[data-theme="dark"] {
+ --leo-effect-shadow-bottom-sheet-0: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
+ --leo-effect-shadow-bottom-sheet-1: 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
}
Variables Diff: variables-browser.diff--- ./tokens/css/variables-browser.old.css 2026-03-11 20:30:36.396222851 +0000
+++ ./tokens/css/variables-browser.css 2026-03-11 20:30:00.379031553 +0000
@@ -1,130 +1,38 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:30:00 GMT+0000 (Coordinated Universal Time)
*/
:root {
- --leo-font-default-link: 400 14px/16.8px Inter Variable;
- --leo-font-default-regular: 400 14px/16.8px Inter Variable;
- --leo-font-default-semibold: 600 14px/16.8px Inter Variable;
- --leo-font-large-link: 400 16px/19.2px Inter Variable;
- --leo-font-large-regular: 400 16px/19.2px Inter Variable;
- --leo-font-large-semibold: 600 16px/19.2px Inter Variable;
- --leo-font-sidebar-product-title: 600 19px/19px Poppins;
- --leo-font-small-link: 400 13px/15.6px Inter Variable;
- --leo-font-small-regular: 400 13px/15.6px Inter Variable;
- --leo-font-small-semibold: 600 13px/15.6px Inter Variable;
- --leo-font-x-small-link: 400 12px/14.4px Inter Variable;
- --leo-font-x-small-regular: 400 12px/14.4px Inter Variable;
- --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-line-height: 16.8px;
- --leo-typography-default-link-paragraph-indent: 0;
- --leo-typography-default-link-paragraph-spacing: 0;
- --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-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-large-link-font-size: 16px;
- --leo-typography-large-link-font-weight: 400;
- --leo-typography-large-link-letter-spacing: 0;
- --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-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-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-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-small-link-font-size: 13px;
- --leo-typography-small-link-font-weight: 400;
- --leo-typography-small-link-letter-spacing: 0;
- --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-regular-font-size: 13px;
- --leo-typography-small-regular-font-weight: 400;
- --leo-typography-small-regular-letter-spacing: 0;
- --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-semibold-font-size: 13px;
- --leo-typography-small-semibold-font-weight: 600;
- --leo-typography-small-semibold-letter-spacing: 0;
- --leo-typography-small-semibold-line-height: 15.6px;
- --leo-typography-small-semibold-paragraph-indent: 0;
- --leo-typography-small-semibold-paragraph-spacing: 0;
- --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-line-height: 14.4px;
- --leo-typography-x-small-link-paragraph-indent: 0;
- --leo-typography-x-small-link-paragraph-spacing: 0;
- --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-line-height: 14.4px;
- --leo-typography-x-small-regular-paragraph-indent: 0;
- --leo-typography-x-small-regular-paragraph-spacing: 0;
- --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-line-height: 14.4px;
- --leo-typography-x-small-semibold-paragraph-indent: 0;
- --leo-typography-x-small-semibold-paragraph-spacing: 0;
+ --leo-font-browser-menu-item: 400 13px/15.6px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-typography-browser-menu-item-font-size: 13px;
+ --leo-typography-browser-menu-item-font-weight: 400;
+ --leo-typography-browser-menu-item-letter-spacing: -0.23px;
+ --leo-typography-browser-menu-item-line-height: 15.6px;
+ --leo-typography-browser-menu-item-paragraph-indent: 0;
+ --leo-typography-browser-menu-item-paragraph-spacing: 0;
}
@media (prefers-color-scheme: light) {
:root {
- --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
- --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
- --leo-effect-url-bar-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 4px 8px -2px rgba(0, 0, 0, 0.1);
+ --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.2);
}
}
@media (prefers-color-scheme: dark) {
:root {
- --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
- --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
- --leo-effect-url-bar-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 4px 8px -2px rgba(0, 0, 0, 0.1);
+ --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.2);
}
}
[data-theme="light"] {
- --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
- --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
- --leo-effect-url-bar-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 4px 8px -2px rgba(0, 0, 0, 0.1);
+ --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] {
- --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
- --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
- --leo-effect-url-bar-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 4px 8px -2px rgba(0, 0, 0, 0.1);
+ --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.2);
}
Variables Diff: variables-ios.diff--- ./tokens/css/variables-ios.old.css 2026-03-11 20:30:36.741551624 +0000
+++ ./tokens/css/variables-ios.css 2026-03-11 20:30:00.401031512 +0000
@@ -1,126 +1,245 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:30:00 GMT+0000 (Coordinated Universal Time)
*/
:root {
- --leo-font-ios-default-regular: 400 15px/20px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-default-semibold: 600 15px/20px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-heading-display1: 500 44px/52px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-heading-display2: 500 36px/44px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-heading-h1: 500 32px/40px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-heading-h2: 500 28px/34px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-heading-h3: 500 22px/28px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-heading-h4: 500 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-large-regular: 400 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-large-semibold: 600 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-monospace-default: 400 15px/20px SF Mono;
- --leo-font-ios-monospace-large: 400 17px/22px SF Mono;
- --leo-font-ios-monospace-small: 400 13px/18px SF Mono;
- --leo-font-ios-small-regular: 400 13px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-small-semibold: 600 13px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-x-small-regular: 400 11px/13px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-x-small-semibold: 600 11px/13px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-typography-ios-default-regular-font-size: 15px;
- --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-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-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-line-height: 52px;
- --leo-typography-ios-heading-display1-paragraph-indent: 0;
- --leo-typography-ios-heading-display1-paragraph-spacing: 0;
- --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-line-height: 44px;
- --leo-typography-ios-heading-display2-paragraph-indent: 0;
- --leo-typography-ios-heading-display2-paragraph-spacing: 0;
- --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-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-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-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-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-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-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-line-height: 20px;
- --leo-typography-ios-monospace-default-paragraph-indent: 0;
- --leo-typography-ios-monospace-default-paragraph-spacing: 0;
- --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-line-height: 22px;
- --leo-typography-ios-monospace-large-paragraph-indent: 0;
- --leo-typography-ios-monospace-large-paragraph-spacing: 0;
- --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-line-height: 18px;
- --leo-typography-ios-monospace-small-paragraph-indent: 0;
- --leo-typography-ios-monospace-small-paragraph-spacing: 0;
- --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-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-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-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-font-body-emphasized: 600 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-body-emphasized-italic: italic 600 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-body-italic: italic 400 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-body-regular: 400 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-callout-emphasized: 600 16px/21px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-callout-emphasized-italic: italic 600 16px/21px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-callout-italic: italic 400 16px/21px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-callout-regular: 400 16px/21px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption1-emphasized: 500 12px/16px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption1-emphasized-italic: italic 500 12px/16px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption1-italic: italic 400 12px/16px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption1-regular: 400 12px/16px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption2-emphasized: 600 11px/13px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption2-emphasized-italic: italic 600 11px/13px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption2-italic: italic 400 11px/13px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption2-regular: 400 11px/13px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-footnote-emphasized: 600 13px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-footnote-emphasized-italic: italic 600 13px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-footnote-italic: italic 400 13px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-footnote-regular: 400 13px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-headline-italic: italic 600 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-headline-regular: 600 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-large-title-emphasized: 700 34px/41px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-large-title-regular: 400 34px/41px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-subheadline-emphaized-italic: italic 600 15px/20px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-subheadline-emphasized: 600 15px/20px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-subheadline-italic: italic 400 15px/20px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-subheadline-regular: 400 15px/20px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-title1-emphasized: 700 28px/34px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-title1-regular: 400 28px/34px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-title2-emphasized: 700 22px/28px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-title2-regular: 400 22px/28px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-title3-emphasized: 600 20px/25px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-title3-regular: 400 20px/25px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-typography-body-emphasized-font-size: 17px;
+ --leo-typography-body-emphasized-font-weight: 600;
+ --leo-typography-body-emphasized-italic-font-size: 17px;
+ --leo-typography-body-emphasized-italic-font-weight: 600;
+ --leo-typography-body-emphasized-italic-letter-spacing: -0.43px;
+ --leo-typography-body-emphasized-italic-line-height: 22px;
+ --leo-typography-body-emphasized-italic-paragraph-indent: 0;
+ --leo-typography-body-emphasized-italic-paragraph-spacing: 0;
+ --leo-typography-body-emphasized-letter-spacing: -0.43px;
+ --leo-typography-body-emphasized-line-height: 22px;
+ --leo-typography-body-emphasized-paragraph-indent: 0;
+ --leo-typography-body-emphasized-paragraph-spacing: 0;
+ --leo-typography-body-italic-font-size: 17px;
+ --leo-typography-body-italic-font-weight: 400;
+ --leo-typography-body-italic-letter-spacing: -0.43px;
+ --leo-typography-body-italic-line-height: 22px;
+ --leo-typography-body-italic-paragraph-indent: 0;
+ --leo-typography-body-italic-paragraph-spacing: 0;
+ --leo-typography-body-regular-font-size: 17px;
+ --leo-typography-body-regular-font-weight: 400;
+ --leo-typography-body-regular-letter-spacing: -0.43px;
+ --leo-typography-body-regular-line-height: 22px;
+ --leo-typography-body-regular-paragraph-indent: 0;
+ --leo-typography-body-regular-paragraph-spacing: 0;
+ --leo-typography-callout-emphasized-font-size: 16px;
+ --leo-typography-callout-emphasized-font-weight: 600;
+ --leo-typography-callout-emphasized-italic-font-size: 16px;
+ --leo-typography-callout-emphasized-italic-font-weight: 600;
+ --leo-typography-callout-emphasized-italic-letter-spacing: -0.31px;
+ --leo-typography-callout-emphasized-italic-line-height: 21px;
+ --leo-typography-callout-emphasized-italic-paragraph-indent: 0;
+ --leo-typography-callout-emphasized-italic-paragraph-spacing: 0;
+ --leo-typography-callout-emphasized-letter-spacing: -0.31px;
+ --leo-typography-callout-emphasized-line-height: 21px;
+ --leo-typography-callout-emphasized-paragraph-indent: 0;
+ --leo-typography-callout-emphasized-paragraph-spacing: 0;
+ --leo-typography-callout-italic-font-size: 16px;
+ --leo-typography-callout-italic-font-weight: 400;
+ --leo-typography-callout-italic-letter-spacing: -0.31px;
+ --leo-typography-callout-italic-line-height: 21px;
+ --leo-typography-callout-italic-paragraph-indent: 0;
+ --leo-typography-callout-italic-paragraph-spacing: 0;
+ --leo-typography-callout-regular-font-size: 16px;
+ --leo-typography-callout-regular-font-weight: 400;
+ --leo-typography-callout-regular-letter-spacing: -0.31px;
+ --leo-typography-callout-regular-line-height: 21px;
+ --leo-typography-callout-regular-paragraph-indent: 0;
+ --leo-typography-callout-regular-paragraph-spacing: 0;
+ --leo-typography-caption1-emphasized-font-size: 12px;
+ --leo-typography-caption1-emphasized-font-weight: 500;
+ --leo-typography-caption1-emphasized-italic-font-size: 12px;
+ --leo-typography-caption1-emphasized-italic-font-weight: 500;
+ --leo-typography-caption1-emphasized-italic-letter-spacing: 0;
+ --leo-typography-caption1-emphasized-italic-line-height: 16px;
+ --leo-typography-caption1-emphasized-italic-paragraph-indent: 0;
+ --leo-typography-caption1-emphasized-italic-paragraph-spacing: 0;
+ --leo-typography-caption1-emphasized-letter-spacing: 0;
+ --leo-typography-caption1-emphasized-line-height: 16px;
+ --leo-typography-caption1-emphasized-paragraph-indent: 0;
+ --leo-typography-caption1-emphasized-paragraph-spacing: 0;
+ --leo-typography-caption1-italic-font-size: 12px;
+ --leo-typography-caption1-italic-font-weight: 400;
+ --leo-typography-caption1-italic-letter-spacing: 0;
+ --leo-typography-caption1-italic-line-height: 16px;
+ --leo-typography-caption1-italic-paragraph-indent: 0;
+ --leo-typography-caption1-italic-paragraph-spacing: 0;
+ --leo-typography-caption1-regular-font-size: 12px;
+ --leo-typography-caption1-regular-font-weight: 400;
+ --leo-typography-caption1-regular-letter-spacing: 0;
+ --leo-typography-caption1-regular-line-height: 16px;
+ --leo-typography-caption1-regular-paragraph-indent: 0;
+ --leo-typography-caption1-regular-paragraph-spacing: 0;
+ --leo-typography-caption2-emphasized-font-size: 11px;
+ --leo-typography-caption2-emphasized-font-weight: 600;
+ --leo-typography-caption2-emphasized-italic-font-size: 11px;
+ --leo-typography-caption2-emphasized-italic-font-weight: 600;
+ --leo-typography-caption2-emphasized-italic-letter-spacing: 0.06px;
+ --leo-typography-caption2-emphasized-italic-line-height: 13px;
+ --leo-typography-caption2-emphasized-italic-paragraph-indent: 0;
+ --leo-typography-caption2-emphasized-italic-paragraph-spacing: 0;
+ --leo-typography-caption2-emphasized-letter-spacing: 0.06px;
+ --leo-typography-caption2-emphasized-line-height: 13px;
+ --leo-typography-caption2-emphasized-paragraph-indent: 0;
+ --leo-typography-caption2-emphasized-paragraph-spacing: 0;
+ --leo-typography-caption2-italic-font-size: 11px;
+ --leo-typography-caption2-italic-font-weight: 400;
+ --leo-typography-caption2-italic-letter-spacing: 0.06px;
+ --leo-typography-caption2-italic-line-height: 13px;
+ --leo-typography-caption2-italic-paragraph-indent: 0;
+ --leo-typography-caption2-italic-paragraph-spacing: 0;
+ --leo-typography-caption2-regular-font-size: 11px;
+ --leo-typography-caption2-regular-font-weight: 400;
+ --leo-typography-caption2-regular-letter-spacing: 0.06px;
+ --leo-typography-caption2-regular-line-height: 13px;
+ --leo-typography-caption2-regular-paragraph-indent: 0;
+ --leo-typography-caption2-regular-paragraph-spacing: 0;
+ --leo-typography-footnote-emphasized-font-size: 13px;
+ --leo-typography-footnote-emphasized-font-weight: 600;
+ --leo-typography-footnote-emphasized-italic-font-size: 13px;
+ --leo-typography-footnote-emphasized-italic-font-weight: 600;
+ --leo-typography-footnote-emphasized-italic-letter-spacing: -0.08px;
+ --leo-typography-footnote-emphasized-italic-line-height: 18px;
+ --leo-typography-footnote-emphasized-italic-paragraph-indent: 0;
+ --leo-typography-footnote-emphasized-italic-paragraph-spacing: 0;
+ --leo-typography-footnote-emphasized-letter-spacing: -0.08px;
+ --leo-typography-footnote-emphasized-line-height: 18px;
+ --leo-typography-footnote-emphasized-paragraph-indent: 0;
+ --leo-typography-footnote-emphasized-paragraph-spacing: 0;
+ --leo-typography-footnote-italic-font-size: 13px;
+ --leo-typography-footnote-italic-font-weight: 400;
+ --leo-typography-footnote-italic-letter-spacing: -0.08px;
+ --leo-typography-footnote-italic-line-height: 18px;
+ --leo-typography-footnote-italic-paragraph-indent: 0;
+ --leo-typography-footnote-italic-paragraph-spacing: 0;
+ --leo-typography-footnote-regular-font-size: 13px;
+ --leo-typography-footnote-regular-font-weight: 400;
+ --leo-typography-footnote-regular-letter-spacing: -0.08px;
+ --leo-typography-footnote-regular-line-height: 18px;
+ --leo-typography-footnote-regular-paragraph-indent: 0;
+ --leo-typography-footnote-regular-paragraph-spacing: 0;
+ --leo-typography-headline-italic-font-size: 17px;
+ --leo-typography-headline-italic-font-weight: 600;
+ --leo-typography-headline-italic-letter-spacing: -0.43px;
+ --leo-typography-headline-italic-line-height: 22px;
+ --leo-typography-headline-italic-paragraph-indent: 0;
+ --leo-typography-headline-italic-paragraph-spacing: 0;
+ --leo-typography-headline-regular-font-size: 17px;
+ --leo-typography-headline-regular-font-weight: 600;
+ --leo-typography-headline-regular-letter-spacing: -0.43px;
+ --leo-typography-headline-regular-line-height: 22px;
+ --leo-typography-headline-regular-paragraph-indent: 0;
+ --leo-typography-headline-regular-paragraph-spacing: 0;
+ --leo-typography-large-title-emphasized-font-size: 34px;
+ --leo-typography-large-title-emphasized-font-weight: 700;
+ --leo-typography-large-title-emphasized-letter-spacing: 0.4px;
+ --leo-typography-large-title-emphasized-line-height: 41px;
+ --leo-typography-large-title-emphasized-paragraph-indent: 0;
+ --leo-typography-large-title-emphasized-paragraph-spacing: 0;
+ --leo-typography-large-title-regular-font-size: 34px;
+ --leo-typography-large-title-regular-font-weight: 400;
+ --leo-typography-large-title-regular-letter-spacing: 0.4px;
+ --leo-typography-large-title-regular-line-height: 41px;
+ --leo-typography-large-title-regular-paragraph-indent: 0;
+ --leo-typography-large-title-regular-paragraph-spacing: 0;
+ --leo-typography-subheadline-emphaized-italic-font-size: 15px;
+ --leo-typography-subheadline-emphaized-italic-font-weight: 600;
+ --leo-typography-subheadline-emphaized-italic-letter-spacing: -0.23px;
+ --leo-typography-subheadline-emphaized-italic-line-height: 20px;
+ --leo-typography-subheadline-emphaized-italic-paragraph-indent: 0;
+ --leo-typography-subheadline-emphaized-italic-paragraph-spacing: 0;
+ --leo-typography-subheadline-emphasized-font-size: 15px;
+ --leo-typography-subheadline-emphasized-font-weight: 600;
+ --leo-typography-subheadline-emphasized-letter-spacing: -0.23px;
+ --leo-typography-subheadline-emphasized-line-height: 20px;
+ --leo-typography-subheadline-emphasized-paragraph-indent: 0;
+ --leo-typography-subheadline-emphasized-paragraph-spacing: 0;
+ --leo-typography-subheadline-italic-font-size: 15px;
+ --leo-typography-subheadline-italic-font-weight: 400;
+ --leo-typography-subheadline-italic-letter-spacing: -0.23px;
+ --leo-typography-subheadline-italic-line-height: 20px;
+ --leo-typography-subheadline-italic-paragraph-indent: 0;
+ --leo-typography-subheadline-italic-paragraph-spacing: 0;
+ --leo-typography-subheadline-regular-font-size: 15px;
+ --leo-typography-subheadline-regular-font-weight: 400;
+ --leo-typography-subheadline-regular-letter-spacing: -0.23px;
+ --leo-typography-subheadline-regular-line-height: 20px;
+ --leo-typography-subheadline-regular-paragraph-indent: 0;
+ --leo-typography-subheadline-regular-paragraph-spacing: 0;
+ --leo-typography-title1-emphasized-font-size: 28px;
+ --leo-typography-title1-emphasized-font-weight: 700;
+ --leo-typography-title1-emphasized-letter-spacing: 0.38px;
+ --leo-typography-title1-emphasized-line-height: 34px;
+ --leo-typography-title1-emphasized-paragraph-indent: 0;
+ --leo-typography-title1-emphasized-paragraph-spacing: 0;
+ --leo-typography-title1-regular-font-size: 28px;
+ --leo-typography-title1-regular-font-weight: 400;
+ --leo-typography-title1-regular-letter-spacing: 0.38px;
+ --leo-typography-title1-regular-line-height: 34px;
+ --leo-typography-title1-regular-paragraph-indent: 0;
+ --leo-typography-title1-regular-paragraph-spacing: 0;
+ --leo-typography-title2-emphasized-font-size: 22px;
+ --leo-typography-title2-emphasized-font-weight: 700;
+ --leo-typography-title2-emphasized-letter-spacing: -0.26px;
+ --leo-typography-title2-emphasized-line-height: 28px;
+ --leo-typography-title2-emphasized-paragraph-indent: 0;
+ --leo-typography-title2-emphasized-paragraph-spacing: 0;
+ --leo-typography-title2-regular-font-size: 22px;
+ --leo-typography-title2-regular-font-weight: 400;
+ --leo-typography-title2-regular-letter-spacing: -0.26px;
+ --leo-typography-title2-regular-line-height: 28px;
+ --leo-typography-title2-regular-paragraph-indent: 0;
+ --leo-typography-title2-regular-paragraph-spacing: 0;
+ --leo-typography-title3-emphasized-font-size: 20px;
+ --leo-typography-title3-emphasized-font-weight: 600;
+ --leo-typography-title3-emphasized-letter-spacing: -0.45px;
+ --leo-typography-title3-emphasized-line-height: 25px;
+ --leo-typography-title3-emphasized-paragraph-indent: 0;
+ --leo-typography-title3-emphasized-paragraph-spacing: 0;
+ --leo-typography-title3-regular-font-size: 20px;
+ --leo-typography-title3-regular-font-weight: 400;
+ --leo-typography-title3-regular-letter-spacing: -0.45px;
+ --leo-typography-title3-regular-line-height: 25px;
+ --leo-typography-title3-regular-paragraph-indent: 0;
+ --leo-typography-title3-regular-paragraph-spacing: 0;
}
Variables Diff: variables-marketing.diff--- ./tokens/css/variables-marketing.old.css 2026-03-11 20:30:37.030625234 +0000
+++ ./tokens/css/variables-marketing.css 2026-03-11 20:30:00.450031421 +0000
@@ -1,219 +1,361 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:30:00 GMT+0000 (Coordinated Universal Time)
*/
:root {
- --leo-font-desktop-primary-blockquote: 600 20px/30px Poppins;
- --leo-font-desktop-primary-h1: 600 80px/100px Poppins;
- --leo-font-desktop-primary-h2: 600 70px/90px Poppins;
- --leo-font-desktop-primary-h3: 600 40px/44px Poppins;
- --leo-font-desktop-primary-h4: 600 30px/40px Poppins;
- --leo-font-desktop-primary-h5: 600 24px/30px Poppins;
- --leo-font-desktop-primary-hero: 600 120px/130px Poppins;
- --leo-font-desktop-primary-text-default: 400 20px/30px Poppins;
- --leo-font-desktop-primary-text-small: 700 15px/20px Poppins;
- --leo-font-desktop-secondary-h1: 500 100px/95px Flecha M;
- --leo-font-desktop-secondary-h2: 500 80px/75px Flecha M;
- --leo-font-desktop-secondary-h3: 500 70px/75px Flecha M;
- --leo-font-desktop-secondary-h4: 500 40px/45px Flecha M;
- --leo-font-desktop-secondary-h5: 500 30px/40px Flecha M;
- --leo-font-desktop-secondary-hero: 500 120px/103px Flecha M;
- --leo-font-mobile-primary-blockquote: 600 20px/28px Poppins;
- --leo-font-mobile-primary-h1: 600 36px/45px Poppins;
- --leo-font-mobile-primary-h2: 600 30px/40px Poppins;
- --leo-font-mobile-primary-h3: 600 24px/35px Poppins;
- --leo-font-mobile-primary-h4: 600 20px/25px Poppins;
- --leo-font-mobile-primary-h5: 600 18px/20px Poppins;
- --leo-font-mobile-primary-hero: 600 54px/65px Poppins;
- --leo-font-mobile-primary-text-default: 400 18px/28px Poppins;
- --leo-font-mobile-primary-text-small: 700 15px/20px Poppins;
- --leo-font-mobile-secondary-h1: 500 40px/45px Flecha M;
- --leo-font-mobile-secondary-h2: 500 36px/40px Flecha M;
- --leo-font-mobile-secondary-h3: 500 30px/30px Flecha M;
- --leo-font-mobile-secondary-h4: 500 24px/30px Flecha M;
- --leo-font-mobile-secondary-h5: 500 20px/25px Flecha M;
- --leo-font-mobile-secondary-hero: 500 54px/50px Flecha M;
- --leo-typography-desktop-primary-blockquote-font-size: 20px;
- --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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-line-height: 20px;
- --leo-typography-mobile-primary-text-small-paragraph-indent: 0;
- --leo-typography-mobile-primary-text-small-paragraph-spacing: 0;
- --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-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-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-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-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-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-font-default-link: 400 14px/22px Inter Variable;
+ --leo-font-default-regular: 400 14px/22px Inter Variable;
+ --leo-font-default-semibold: 600 14px/22px Inter Variable;
+ --leo-font-display-primary-blockquote: 600 20px/30px Inter Variable;
+ --leo-font-display-primary-h1: 600 80px/100px Inter Variable;
+ --leo-font-display-primary-h2: 600 70px/90px Inter Variable;
+ --leo-font-display-primary-h3: 600 40px/70px Inter Variable;
+ --leo-font-display-primary-h4: 600 30px/40px Inter Variable;
+ --leo-font-display-primary-h5: 600 24px/30px Inter Variable;
+ --leo-font-display-primary-hero: 600 120px/130px Inter Variable;
+ --leo-font-display-primary-text-default: 400 20px/30px Inter Variable;
+ --leo-font-display-primary-text-small: 700 15px/20px Inter Variable;
+ --leo-font-display-secondary-h1: 500 100px/95px Flecha M;
+ --leo-font-display-secondary-h2: 500 80px/75px Flecha M;
+ --leo-font-display-secondary-h3: 500 70px/75px Flecha M;
+ --leo-font-display-secondary-h4: 500 40px/45px Flecha M;
+ --leo-font-display-secondary-h5: 500 30px/40px Flecha M;
+ --leo-font-display-secondary-hero: 500 120px/103px Flecha M;
+ --leo-font-heading-display1: 600 46px/54px Inter Variable;
+ --leo-font-heading-display2: 600 40px/48px Inter Variable;
+ --leo-font-heading-display3: 600 34px/40px Inter Variable;
+ --leo-font-heading-h1: 600 28px/34px Inter Variable;
+ --leo-font-heading-h2: 600 22px/28px Inter Variable;
+ --leo-font-heading-h3: 600 20px/26px Inter Variable;
+ --leo-font-heading-h4: 600 16px/24px Inter Variable;
+ --leo-font-large-link: 400 16px/24px Inter Variable;
+ --leo-font-large-regular: 400 16px/24px Inter Variable;
+ --leo-font-large-semibold: 600 16px/24px Inter Variable;
+ --leo-font-monospace-default: 400 14px/22px 'SF Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+ --leo-font-monospace-large: 400 16px/24px 'SF Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+ --leo-font-monospace-small: 400 12px/18px 'SF Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+ --leo-font-small-link: 400 12px/18px Inter Variable;
+ --leo-font-small-regular: 400 12px/18px Inter Variable;
+ --leo-font-small-semibold: 600 12px/18px Inter Variable;
+ --leo-font-x-large-link: 400 20px/30px Inter Variable;
+ --leo-font-x-large-regular: 400 20px/30px Inter Variable;
+ --leo-font-x-large-semibold: 600 20px/30px Inter Variable;
+ --leo-font-x-small-link: 400 11px/16px Inter Variable;
+ --leo-font-x-small-regular: 400 11px/16px Inter Variable;
+ --leo-font-x-small-semibold: 600 11px/16px Inter Variable;
+ --leo-typography-default-link-font-size: 14px;
+ --leo-typography-default-link-font-weight: 400;
+ --leo-typography-default-link-letter-spacing: -0.23px;
+ --leo-typography-default-link-line-height: 22px;
+ --leo-typography-default-link-paragraph-indent: 0;
+ --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.23px;
+ --leo-typography-default-regular-line-height: 22px;
+ --leo-typography-default-regular-paragraph-indent: 0;
+ --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.23px;
+ --leo-typography-default-semibold-line-height: 22px;
+ --leo-typography-default-semibold-paragraph-indent: 0;
+ --leo-typography-default-semibold-paragraph-spacing: 8px;
+ --leo-typography-display-primary-blockquote-font-size: 20px;
+ --leo-typography-display-primary-blockquote-font-weight: 600;
+ --leo-typography-display-primary-blockquote-letter-spacing: -0.4px;
+ --leo-typography-display-primary-blockquote-line-height: 30px;
+ --leo-typography-display-primary-blockquote-paragraph-indent: 0;
+ --leo-typography-display-primary-blockquote-paragraph-spacing: 8px;
+ --leo-typography-display-primary-h1-font-size: 80px;
+ --leo-typography-display-primary-h1-font-weight: 600;
+ --leo-typography-display-primary-h1-letter-spacing: -1.6px;
+ --leo-typography-display-primary-h1-line-height: 100px;
+ --leo-typography-display-primary-h1-paragraph-indent: 0;
+ --leo-typography-display-primary-h1-paragraph-spacing: 0;
+ --leo-typography-display-primary-h2-font-size: 70px;
+ --leo-typography-display-primary-h2-font-weight: 600;
+ --leo-typography-display-primary-h2-letter-spacing: -1.4px;
+ --leo-typography-display-primary-h2-line-height: 90px;
+ --leo-typography-display-primary-h2-paragraph-indent: 0;
+ --leo-typography-display-primary-h2-paragraph-spacing: 0;
+ --leo-typography-display-primary-h3-font-size: 40px;
+ --leo-typography-display-primary-h3-font-weight: 600;
+ --leo-typography-display-primary-h3-letter-spacing: -0.8px;
+ --leo-typography-display-primary-h3-line-height: 70px;
+ --leo-typography-display-primary-h3-paragraph-indent: 0;
+ --leo-typography-display-primary-h3-paragraph-spacing: 0;
+ --leo-typography-display-primary-h4-font-size: 30px;
+ --leo-typography-display-primary-h4-font-weight: 600;
+ --leo-typography-display-primary-h4-letter-spacing: -0.6px;
+ --leo-typography-display-primary-h4-line-height: 40px;
+ --leo-typography-display-primary-h4-paragraph-indent: 0;
+ --leo-typography-display-primary-h4-paragraph-spacing: 0;
+ --leo-typography-display-primary-h5-font-size: 24px;
+ --leo-typography-display-primary-h5-font-weight: 600;
+ --leo-typography-display-primary-h5-letter-spacing: -0.48px;
+ --leo-typography-display-primary-h5-line-height: 30px;
+ --leo-typography-display-primary-h5-paragraph-indent: 0;
+ --leo-typography-display-primary-h5-paragraph-spacing: 0;
+ --leo-typography-display-primary-hero-font-size: 120px;
+ --leo-typography-display-primary-hero-font-weight: 600;
+ --leo-typography-display-primary-hero-letter-spacing: -2.4px;
+ --leo-typography-display-primary-hero-line-height: 130px;
+ --leo-typography-display-primary-hero-paragraph-indent: 0;
+ --leo-typography-display-primary-hero-paragraph-spacing: 0;
+ --leo-typography-display-primary-text-default-font-size: 20px;
+ --leo-typography-display-primary-text-default-font-weight: 400;
+ --leo-typography-display-primary-text-default-letter-spacing: -0.4px;
+ --leo-typography-display-primary-text-default-line-height: 30px;
+ --leo-typography-display-primary-text-default-paragraph-indent: 0;
+ --leo-typography-display-primary-text-default-paragraph-spacing: 8px;
+ --leo-typography-display-primary-text-small-font-size: 15px;
+ --leo-typography-display-primary-text-small-font-weight: 700;
+ --leo-typography-display-primary-text-small-letter-spacing: -0.3px;
+ --leo-typography-display-primary-text-small-line-height: 20px;
+ --leo-typography-display-primary-text-small-paragraph-indent: 0;
+ --leo-typography-display-primary-text-small-paragraph-spacing: 8px;
+ --leo-typography-display-secondary-h1-font-size: 100px;
+ --leo-typography-display-secondary-h1-font-weight: 500;
+ --leo-typography-display-secondary-h1-letter-spacing: -2px;
+ --leo-typography-display-secondary-h1-line-height: 95px;
+ --leo-typography-display-secondary-h1-paragraph-indent: 0;
+ --leo-typography-display-secondary-h1-paragraph-spacing: 0;
+ --leo-typography-display-secondary-h2-font-size: 80px;
+ --leo-typography-display-secondary-h2-font-weight: 500;
+ --leo-typography-display-secondary-h2-letter-spacing: -1.6px;
+ --leo-typography-display-secondary-h2-line-height: 75px;
+ --leo-typography-display-secondary-h2-paragraph-indent: 0;
+ --leo-typography-display-secondary-h2-paragraph-spacing: 0;
+ --leo-typography-display-secondary-h3-font-size: 70px;
+ --leo-typography-display-secondary-h3-font-weight: 500;
+ --leo-typography-display-secondary-h3-letter-spacing: -1.4px;
+ --leo-typography-display-secondary-h3-line-height: 75px;
+ --leo-typography-display-secondary-h3-paragraph-indent: 0;
+ --leo-typography-display-secondary-h3-paragraph-spacing: 0;
+ --leo-typography-display-secondary-h4-font-size: 40px;
+ --leo-typography-display-secondary-h4-font-weight: 500;
+ --leo-typography-display-secondary-h4-letter-spacing: -0.8px;
+ --leo-typography-display-secondary-h4-line-height: 45px;
+ --leo-typography-display-secondary-h4-paragraph-indent: 0;
+ --leo-typography-display-secondary-h4-paragraph-spacing: 0;
+ --leo-typography-display-secondary-h5-font-size: 30px;
+ --leo-typography-display-secondary-h5-font-weight: 500;
+ --leo-typography-display-secondary-h5-letter-spacing: -0.6px;
+ --leo-typography-display-secondary-h5-line-height: 40px;
+ --leo-typography-display-secondary-h5-paragraph-indent: 0;
+ --leo-typography-display-secondary-h5-paragraph-spacing: 0;
+ --leo-typography-display-secondary-hero-font-size: 120px;
+ --leo-typography-display-secondary-hero-font-weight: 500;
+ --leo-typography-display-secondary-hero-letter-spacing: -2.4px;
+ --leo-typography-display-secondary-hero-line-height: 103px;
+ --leo-typography-display-secondary-hero-paragraph-indent: 0;
+ --leo-typography-display-secondary-hero-paragraph-spacing: 0;
+ --leo-typography-font-size-primary-blockquote: 20px;
+ --leo-typography-font-size-primary-default: 20px;
+ --leo-typography-font-size-primary-h1: 80px;
+ --leo-typography-font-size-primary-h2: 70px;
+ --leo-typography-font-size-primary-h3: 40px;
+ --leo-typography-font-size-primary-h4: 30px;
+ --leo-typography-font-size-primary-h5: 24px;
+ --leo-typography-font-size-primary-hero: 120px;
+ --leo-typography-font-size-primary-small: 15px;
+ --leo-typography-font-size-secondary-blockquote: 20px;
+ --leo-typography-font-size-secondary-default: 20px;
+ --leo-typography-font-size-secondary-h1: 100px;
+ --leo-typography-font-size-secondary-h2: 80px;
+ --leo-typography-font-size-secondary-h3: 70px;
+ --leo-typography-font-size-secondary-h4: 40px;
+ --leo-typography-font-size-secondary-h5: 30px;
+ --leo-typography-font-size-secondary-hero: 120px;
+ --leo-typography-font-size-secondary-small: 15px;
+ --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: 8px;
+ --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: 8px;
+ --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: 8px;
+ --leo-typography-heading-h1-font-size: 28px;
+ --leo-typography-heading-h1-font-weight: 600;
+ --leo-typography-heading-h1-letter-spacing: -0.5px;
+ --leo-typography-heading-h1-line-height: 34px;
+ --leo-typography-heading-h1-paragraph-indent: 0;
+ --leo-typography-heading-h1-paragraph-spacing: 8px;
+ --leo-typography-heading-h2-font-size: 22px;
+ --leo-typography-heading-h2-font-weight: 600;
+ --leo-typography-heading-h2-letter-spacing: -0.5px;
+ --leo-typography-heading-h2-line-height: 28px;
+ --leo-typography-heading-h2-paragraph-indent: 0;
+ --leo-typography-heading-h2-paragraph-spacing: 8px;
+ --leo-typography-heading-h3-font-size: 20px;
+ --leo-typography-heading-h3-font-weight: 600;
+ --leo-typography-heading-h3-letter-spacing: -0.5px;
+ --leo-typography-heading-h3-line-height: 26px;
+ --leo-typography-heading-h3-paragraph-indent: 0;
+ --leo-typography-heading-h3-paragraph-spacing: 8px;
+ --leo-typography-heading-h4-font-size: 16px;
+ --leo-typography-heading-h4-font-weight: 600;
+ --leo-typography-heading-h4-letter-spacing: -0.23px;
+ --leo-typography-heading-h4-line-height: 24px;
+ --leo-typography-heading-h4-paragraph-indent: 0;
+ --leo-typography-heading-h4-paragraph-spacing: 8px;
+ --leo-typography-large-link-font-size: 16px;
+ --leo-typography-large-link-font-weight: 400;
+ --leo-typography-large-link-letter-spacing: -0.23px;
+ --leo-typography-large-link-line-height: 24px;
+ --leo-typography-large-link-paragraph-indent: 0;
+ --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.23px;
+ --leo-typography-large-regular-line-height: 24px;
+ --leo-typography-large-regular-paragraph-indent: 0;
+ --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.23px;
+ --leo-typography-large-semibold-line-height: 24px;
+ --leo-typography-large-semibold-paragraph-indent: 0;
+ --leo-typography-large-semibold-paragraph-spacing: 8px;
+ --leo-typography-line-height-primary-blockquote: 30px;
+ --leo-typography-line-height-primary-default: 30px;
+ --leo-typography-line-height-primary-h1: 100px;
+ --leo-typography-line-height-primary-h2: 90px;
+ --leo-typography-line-height-primary-h3: 44px;
+ --leo-typography-line-height-primary-h4: 40px;
+ --leo-typography-line-height-primary-h5: 30px;
+ --leo-typography-line-height-primary-hero: 130px;
+ --leo-typography-line-height-primary-small: 20px;
+ --leo-typography-line-height-secondary-blockquote: 20px;
+ --leo-typography-line-height-secondary-default: 20px;
+ --leo-typography-line-height-secondary-h1: 95px;
+ --leo-typography-line-height-secondary-h2: 75px;
+ --leo-typography-line-height-secondary-h3: 75px;
+ --leo-typography-line-height-secondary-h4: 45px;
+ --leo-typography-line-height-secondary-h5: 40px;
+ --leo-typography-line-height-secondary-hero: 103px;
+ --leo-typography-line-height-secondary-small: 15px;
+ --leo-typography-mobile-font-size-primary-blockquote: 20px;
+ --leo-typography-mobile-font-size-primary-default: 18px;
+ --leo-typography-mobile-font-size-primary-h1: 36px;
+ --leo-typography-mobile-font-size-primary-h2: 30px;
+ --leo-typography-mobile-font-size-primary-h3: 24px;
+ --leo-typography-mobile-font-size-primary-h4: 20px;
+ --leo-typography-mobile-font-size-primary-h5: 18px;
+ --leo-typography-mobile-font-size-primary-hero: 54px;
+ --leo-typography-mobile-font-size-primary-small: 18px;
+ --leo-typography-mobile-font-size-secondary-blockquote: 20px;
+ --leo-typography-mobile-font-size-secondary-default: 18px;
+ --leo-typography-mobile-font-size-secondary-h1: 36px;
+ --leo-typography-mobile-font-size-secondary-h2: 36px;
+ --leo-typography-mobile-font-size-secondary-h3: 30px;
+ --leo-typography-mobile-font-size-secondary-h4: 24px;
+ --leo-typography-mobile-font-size-secondary-h5: 20px;
+ --leo-typography-mobile-font-size-secondary-hero: 54px;
+ --leo-typography-mobile-font-size-secondary-small: 18px;
+ --leo-typography-mobile-line-height-primary-blockquote: 28px;
+ --leo-typography-mobile-line-height-primary-default: 28px;
+ --leo-typography-mobile-line-height-primary-h1: 45px;
+ --leo-typography-mobile-line-height-primary-h2: 40px;
+ --leo-typography-mobile-line-height-primary-h3: 35px;
+ --leo-typography-mobile-line-height-primary-h4: 25px;
+ --leo-typography-mobile-line-height-primary-h5: 20px;
+ --leo-typography-mobile-line-height-primary-hero: 65px;
+ --leo-typography-mobile-line-height-primary-small: 20px;
+ --leo-typography-mobile-line-height-secondary-blockquote: 20px;
+ --leo-typography-mobile-line-height-secondary-default: 18px;
+ --leo-typography-mobile-line-height-secondary-h1: 45px;
+ --leo-typography-mobile-line-height-secondary-h2: 40px;
+ --leo-typography-mobile-line-height-secondary-h3: 30px;
+ --leo-typography-mobile-line-height-secondary-h4: 30px;
+ --leo-typography-mobile-line-height-secondary-h5: 25px;
+ --leo-typography-mobile-line-height-secondary-hero: 50px;
+ --leo-typography-mobile-line-height-secondary-small: 18px;
+ --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-line-height: 22px;
+ --leo-typography-monospace-default-paragraph-indent: 0;
+ --leo-typography-monospace-default-paragraph-spacing: 8px;
+ --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-line-height: 24px;
+ --leo-typography-monospace-large-paragraph-indent: 0;
+ --leo-typography-monospace-large-paragraph-spacing: 8px;
+ --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-line-height: 18px;
+ --leo-typography-monospace-small-paragraph-indent: 0;
+ --leo-typography-monospace-small-paragraph-spacing: 8px;
+ --leo-typography-small-link-font-size: 12px;
+ --leo-typography-small-link-font-weight: 400;
+ --leo-typography-small-link-letter-spacing: -0.08px;
+ --leo-typography-small-link-line-height: 18px;
+ --leo-typography-small-link-paragraph-indent: 0;
+ --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.08px;
+ --leo-typography-small-regular-line-height: 18px;
+ --leo-typography-small-regular-paragraph-indent: 0;
+ --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.08px;
+ --leo-typography-small-semibold-line-height: 18px;
+ --leo-typography-small-semibold-paragraph-indent: 0;
+ --leo-typography-small-semibold-paragraph-spacing: 8px;
+ --leo-typography-x-large-link-font-size: 20px;
+ --leo-typography-x-large-link-font-weight: 400;
+ --leo-typography-x-large-link-letter-spacing: -0.23px;
+ --leo-typography-x-large-link-line-height: 30px;
+ --leo-typography-x-large-link-paragraph-indent: 0;
+ --leo-typography-x-large-link-paragraph-spacing: 8px;
+ --leo-typography-x-large-regular-font-size: 20px;
+ --leo-typography-x-large-regular-font-weight: 400;
+ --leo-typography-x-large-regular-letter-spacing: -0.23px;
+ --leo-typography-x-large-regular-line-height: 30px;
+ --leo-typography-x-large-regular-paragraph-indent: 0;
+ --leo-typography-x-large-regular-paragraph-spacing: 8px;
+ --leo-typography-x-large-semibold-font-size: 20px;
+ --leo-typography-x-large-semibold-font-weight: 600;
+ --leo-typography-x-large-semibold-letter-spacing: -0.23px;
+ --leo-typography-x-large-semibold-line-height: 30px;
+ --leo-typography-x-large-semibold-paragraph-indent: 0;
+ --leo-typography-x-large-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.08px;
+ --leo-typography-x-small-link-line-height: 16px;
+ --leo-typography-x-small-link-paragraph-indent: 0;
+ --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.08px;
+ --leo-typography-x-small-regular-line-height: 16px;
+ --leo-typography-x-small-regular-paragraph-indent: 0;
+ --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.08px;
+ --leo-typography-x-small-semibold-line-height: 16px;
+ --leo-typography-x-small-semibold-paragraph-indent: 0;
+ --leo-typography-x-small-semibold-paragraph-spacing: 8px;
}
@media (prefers-color-scheme: light) {
Variables Diff: variables-news.diff--- ./tokens/css/variables-news.old.css 2026-03-11 20:30:37.330094934 +0000
+++ ./tokens/css/variables-news.css 2026-03-11 20:30:00.502031325 +0000
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:30:00 GMT+0000 (Coordinated Universal Time)
*/
:root {
Variables Diff: variables-newtab.diff--- ./tokens/css/variables-newtab.old.css 2026-03-11 20:30:37.499528924 +0000
+++ ./tokens/css/variables-newtab.css 2026-03-11 20:30:00.511031308 +0000
@@ -1,18 +1,17 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:30:00 GMT+0000 (Coordinated Universal Time)
*/
:root {
- --leo-font-brave-rewards-widget-progress: 400 24px/24px Poppins;
- --leo-font-brave-rewards-widget-token-balance: 400 36px/36px Poppins;
- --leo-font-stats-h2: 400 40px/40px Poppins;
- --leo-font-stats-h3: 500 20px/24px Poppins;
- --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-font-brave-rewards-widget-progress: 400 22px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-brave-rewards-widget-token-balance: 400 36px/36px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-stats-h2: 400 40px/40px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-stats-h3: 500 20px/24px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-typography-brave-rewards-widget-progress-font-size: 22px;
--leo-typography-brave-rewards-widget-progress-font-weight: 400;
--leo-typography-brave-rewards-widget-progress-letter-spacing: 0;
- --leo-typography-brave-rewards-widget-progress-line-height: 24px;
+ --leo-typography-brave-rewards-widget-progress-line-height: 22px;
--leo-typography-brave-rewards-widget-progress-paragraph-indent: 0;
--leo-typography-brave-rewards-widget-progress-paragraph-spacing: 0;
--leo-typography-brave-rewards-widget-token-balance-font-size: 36px;
Variables Diff: variables-search.diff--- ./tokens/css/variables-search.old.css 2026-03-11 20:30:37.859942855 +0000
+++ ./tokens/css/variables-search.css 2026-03-11 20:30:00.482031362 +0000
@@ -1,63 +1,29 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:30:00 GMT+0000 (Coordinated Universal Time)
*/
:root {
- --leo-font-heading-h5: 600 20px/26px Inter Variable;
- --leo-font-heading-serpresult: 400 18px/26px Inter Variable;
--leo-font-search-snippet-title: 500 18px/26px Inter Variable;
- --leo-font-text-small-bold: 600 13px/21px Inter Variable;
- --leo-font-text-small-link: 600 13px/21px Inter Variable;
- --leo-font-text-small-regular: 400 13px/21px Inter Variable;
--leo-gradient-content-fade-dark: linear-gradient(180deg, rgba(23, 25, 30, 0) 37%, rgb(23, 25, 30) 92%);
--leo-gradient-content-fade-light: linear-gradient(180deg, rgba(255, 255, 255, 0) 37%, rgb(255, 255, 255) 92%);
--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.5px;
- --leo-typography-heading-h5-line-height: 26px;
- --leo-typography-heading-h5-paragraph-indent: 0;
- --leo-typography-heading-h5-paragraph-spacing: 0;
- --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-line-height: 26px;
- --leo-typography-heading-serpresult-paragraph-indent: 0;
- --leo-typography-heading-serpresult-paragraph-spacing: 0;
--leo-typography-search-snippet-title-font-size: 18px;
--leo-typography-search-snippet-title-font-weight: 500;
--leo-typography-search-snippet-title-letter-spacing: 0;
--leo-typography-search-snippet-title-line-height: 26px;
--leo-typography-search-snippet-title-paragraph-indent: 0;
--leo-typography-search-snippet-title-paragraph-spacing: 0;
- --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-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-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;
}
@media (prefers-color-scheme: light) {
:root {
--leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-lowest);
--leo-color-search-background-container: var(--leo-color-schemes-surface-container-lowest);
- --leo-color-search-background-container-interactive: var(--leo-color-primary-10);
--leo-color-search-background-enrichment-cards: var(--leo-color-neutral-5);
--leo-color-search-background-highlight: var(--leo-color-neutral-10);
+ --leo-color-search-background-interactive-normal: var(--leo-color-primary-10);
+ --leo-color-search-background-interactive-pale: var(--leo-color-primary-5);
--leo-color-search-background-landing-page: #eef2f6;
--leo-color-search-background-page: var(--leo-color-schemes-surface-container-lowest);
--leo-color-search-background-search-bar: var(--leo-color-schemes-surface-container-lowest);
@@ -169,9 +135,10 @@
:root {
--leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-highest);
--leo-color-search-background-container: var(--leo-color-schemes-surface-container);
- --leo-color-search-background-container-interactive: var(--leo-color-search-primary-10);
--leo-color-search-background-enrichment-cards: var(--leo-color-neutral-10);
--leo-color-search-background-highlight: var(--leo-color-neutral-20);
+ --leo-color-search-background-interactive-normal: var(--leo-color-primitive-primary-25);
+ --leo-color-search-background-interactive-pale: var(--leo-color-primitive-primary-30);
--leo-color-search-background-landing-page: #1e2028;
--leo-color-search-background-page: var(--leo-color-primitive-neutral-10);
--leo-color-search-background-search-bar: var(--leo-color-schemes-surface-container-highest);
@@ -196,7 +163,7 @@
--leo-color-search-button-pale-background-normal: var(--leo-color-search-primary-10);
--leo-color-search-divider-ask-input-field: var(--leo-color-divider-strong);
--leo-color-search-divider-interactive: rgba(124, 145, 255, 0.3);
- --leo-color-search-divider-strong: var(--leo-color-neutral-50);
+ --leo-color-search-divider-strong: var(--leo-color-neutral-20);
--leo-color-search-divider-subtle: var(--leo-color-primitive-neutral-20);
--leo-color-search-divider-subtle-container: var(--leo-color-neutral-20);
--leo-color-search-fade-semi-transparent: rgba(31, 31, 35, 0.85);
@@ -282,9 +249,10 @@
[data-theme="light"] {
--leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-lowest);
--leo-color-search-background-container: var(--leo-color-schemes-surface-container-lowest);
- --leo-color-search-background-container-interactive: var(--leo-color-primary-10);
--leo-color-search-background-enrichment-cards: var(--leo-color-neutral-5);
--leo-color-search-background-highlight: var(--leo-color-neutral-10);
+ --leo-color-search-background-interactive-normal: var(--leo-color-primary-10);
+ --leo-color-search-background-interactive-pale: var(--leo-color-primary-5);
--leo-color-search-background-landing-page: #eef2f6;
--leo-color-search-background-page: var(--leo-color-schemes-surface-container-lowest);
--leo-color-search-background-search-bar: var(--leo-color-schemes-surface-container-lowest);
@@ -394,9 +362,10 @@
[data-theme="dark"] {
--leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-highest);
--leo-color-search-background-container: var(--leo-color-schemes-surface-container);
- --leo-color-search-background-container-interactive: var(--leo-color-search-primary-10);
--leo-color-search-background-enrichment-cards: var(--leo-color-neutral-10);
--leo-color-search-background-highlight: var(--leo-color-neutral-20);
+ --leo-color-search-background-interactive-normal: var(--leo-color-primitive-primary-25);
+ --leo-color-search-background-interactive-pale: var(--leo-color-primitive-primary-30);
--leo-color-search-background-landing-page: #1e2028;
--leo-color-search-background-page: var(--leo-color-primitive-neutral-10);
--leo-color-search-background-search-bar: var(--leo-color-schemes-surface-container-highest);
@@ -421,7 +390,7 @@
--leo-color-search-button-pale-background-normal: var(--leo-color-search-primary-10);
--leo-color-search-divider-ask-input-field: var(--leo-color-divider-strong);
--leo-color-search-divider-interactive: rgba(124, 145, 255, 0.3);
- --leo-color-search-divider-strong: var(--leo-color-neutral-50);
+ --leo-color-search-divider-strong: var(--leo-color-neutral-20);
--leo-color-search-divider-subtle: var(--leo-color-primitive-neutral-20);
--leo-color-search-divider-subtle-container: var(--leo-color-neutral-20);
--leo-color-search-fade-semi-transparent: rgba(31, 31, 35, 0.85);
Variables Diff: variables-web3.diff--- ./tokens/css/variables-web3.old.css 2026-03-11 20:30:38.167964022 +0000
+++ ./tokens/css/variables-web3.css 2026-03-11 20:30:00.515031301 +0000
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:30:00 GMT+0000 (Coordinated Universal Time)
*/
@media (prefers-color-scheme: light) {
Variables Diff: variables.diff--- ./tokens/css/variables.old.css 2026-03-11 20:30:38.426941588 +0000
+++ ./tokens/css/variables.css 2026-03-11 20:30:00.260031773 +0000
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:30:00 GMT+0000 (Coordinated Universal Time)
*/
:root {
@@ -338,9 +338,9 @@
--leo-font-large-link: 400 16px/24px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--leo-font-large-regular: 400 16px/24px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--leo-font-large-semibold: 600 16px/24px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-monospace-default: 400 14px/16.8px SF Mono;
- --leo-font-monospace-large: 400 16px/19.2px SF Mono;
- --leo-font-monospace-small: 400 12px/14.4px SF Mono;
+ --leo-font-monospace-default: 400 14px/16.8px 'SF Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+ --leo-font-monospace-large: 400 16px/19.2px 'SF Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+ --leo-font-monospace-small: 400 12px/14.4px 'SF Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
--leo-font-small-link: 400 12px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--leo-font-small-regular: 400 12px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--leo-font-small-semibold: 600 12px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
👋 Thanks for Submitting! This PR is available for preview at the link below. ✅ PR tip preview: https://1333.pr.nala.bravesoftware.com/ - ./tokens/css/variables-android.old.css: 7390 bytes
+ ./tokens/css/variables-android.css: 1850 bytes
---
- ./tokens/css/variables-browser.old.css: 6644 bytes
+ ./tokens/css/variables-browser.css: 1438 bytes
---
- ./tokens/css/variables-ios.old.css: 8180 bytes
+ ./tokens/css/variables-ios.css: 16941 bytes
---
- ./tokens/css/variables-marketing.old.css: 13501 bytes
+ ./tokens/css/variables-marketing.css: 21083 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: 2119 bytes
---
- ./tokens/css/variables-search.old.css: 28568 bytes
+ ./tokens/css/variables-search.css: 26939 bytes
---
- ./tokens/css/variables-web3.old.css: 893 bytes
+ ./tokens/css/variables-web3.css: 893 bytes
---
- ./tokens/css/variables.old.css: 126006 bytes
+ ./tokens/css/variables.css: 126306 bytes
Variables Diff: variables-android.diff--- ./tokens/css/variables-android.old.css 2026-03-11 20:34:38.893706405 +0000
+++ ./tokens/css/variables-android.css 2026-03-11 20:34:03.516826274 +0000
@@ -1,126 +1,45 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:34:03 GMT+0000 (Coordinated Universal Time)
*/
:root {
- --leo-font-android-default-regular: 400 14px/20px Roboto;
- --leo-font-android-default-semibold: 600 14px/20px Roboto;
- --leo-font-android-heading-display1: 500 45px/52px Roboto;
- --leo-font-android-heading-display2: 500 36px/44px Roboto;
- --leo-font-android-heading-h1: 500 32px/40px Roboto;
- --leo-font-android-heading-h2: 500 28px/36px Roboto;
- --leo-font-android-heading-h3: 500 22px/28px Roboto;
- --leo-font-android-heading-h4: 600 16px/24px Roboto;
- --leo-font-android-large-regular: 400 16px/24px Roboto;
- --leo-font-android-large-semibold: 600 16px/24px Roboto;
- --leo-font-android-monospace-default: 400 14px/20px Roboto Mono;
- --leo-font-android-monospace-large: 400 16px/24px Roboto Mono;
- --leo-font-android-monospace-small: 400 12px/16px Roboto Mono;
- --leo-font-android-small-regular: 400 12px/16px Roboto;
- --leo-font-android-small-semibold: 600 12px/16px Roboto;
- --leo-font-android-x-small-regular: 400 11px/16px Roboto;
- --leo-font-android-x-small-semibold: 600 11px/16px Roboto;
- --leo-typography-android-default-regular-font-size: 14px;
- --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-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-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-line-height: 52px;
- --leo-typography-android-heading-display1-paragraph-indent: 0;
- --leo-typography-android-heading-display1-paragraph-spacing: 0;
- --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-line-height: 44px;
- --leo-typography-android-heading-display2-paragraph-indent: 0;
- --leo-typography-android-heading-display2-paragraph-spacing: 0;
- --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-line-height: 40px;
- --leo-typography-android-heading-h1-paragraph-indent: 0;
- --leo-typography-android-heading-h1-paragraph-spacing: 0;
- --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-line-height: 36px;
- --leo-typography-android-heading-h2-paragraph-indent: 0;
- --leo-typography-android-heading-h2-paragraph-spacing: 0;
- --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-line-height: 28px;
- --leo-typography-android-heading-h3-paragraph-indent: 0;
- --leo-typography-android-heading-h3-paragraph-spacing: 0;
- --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-line-height: 24px;
- --leo-typography-android-heading-h4-paragraph-indent: 0;
- --leo-typography-android-heading-h4-paragraph-spacing: 0;
- --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-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-line-height: 24px;
- --leo-typography-android-large-semibold-paragraph-indent: 0;
- --leo-typography-android-large-semibold-paragraph-spacing: 0;
- --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-line-height: 20px;
- --leo-typography-android-monospace-default-paragraph-indent: 0;
- --leo-typography-android-monospace-default-paragraph-spacing: 0;
- --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-line-height: 24px;
- --leo-typography-android-monospace-large-paragraph-indent: 0;
- --leo-typography-android-monospace-large-paragraph-spacing: 0;
- --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-line-height: 16px;
- --leo-typography-android-monospace-small-paragraph-indent: 0;
- --leo-typography-android-monospace-small-paragraph-spacing: 0;
- --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-line-height: 16px;
- --leo-typography-android-small-regular-paragraph-indent: 0;
- --leo-typography-android-small-regular-paragraph-spacing: 0;
- --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-line-height: 16px;
- --leo-typography-android-small-semibold-paragraph-indent: 0;
- --leo-typography-android-small-semibold-paragraph-spacing: 0;
- --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-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-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-line-height: 16px;
- --leo-typography-android-x-small-semibold-paragraph-indent: 0;
- --leo-typography-android-x-small-semibold-paragraph-spacing: 0;
+ --leo-font-top-app-bar-default: 400 20px/26px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-top-app-bar-large: 400 22px/28px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-typography-top-app-bar-default-font-size: 20px;
+ --leo-typography-top-app-bar-default-font-weight: 400;
+ --leo-typography-top-app-bar-default-letter-spacing: 0;
+ --leo-typography-top-app-bar-default-line-height: 26px;
+ --leo-typography-top-app-bar-default-paragraph-indent: 0;
+ --leo-typography-top-app-bar-default-paragraph-spacing: 0;
+ --leo-typography-top-app-bar-large-font-size: 22px;
+ --leo-typography-top-app-bar-large-font-weight: 400;
+ --leo-typography-top-app-bar-large-letter-spacing: 0;
+ --leo-typography-top-app-bar-large-line-height: 28px;
+ --leo-typography-top-app-bar-large-paragraph-indent: 0;
+ --leo-typography-top-app-bar-large-paragraph-spacing: 0;
+}
+
+@media (prefers-color-scheme: light) {
+ :root {
+ --leo-effect-shadow-bottom-sheet-0: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
+ --leo-effect-shadow-bottom-sheet-1: 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+ }
+}
+
+@media (prefers-color-scheme: dark) {
+ :root {
+ --leo-effect-shadow-bottom-sheet-0: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
+ --leo-effect-shadow-bottom-sheet-1: 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+ }
+}
+
+[data-theme="light"] {
+ --leo-effect-shadow-bottom-sheet-0: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
+ --leo-effect-shadow-bottom-sheet-1: 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
+}
+
+[data-theme="dark"] {
+ --leo-effect-shadow-bottom-sheet-0: 0px 1px 3px 0px rgba(0, 0, 0, 0.3);
+ --leo-effect-shadow-bottom-sheet-1: 0px 4px 8px 3px rgba(0, 0, 0, 0.15);
}
Variables Diff: variables-browser.diff--- ./tokens/css/variables-browser.old.css 2026-03-11 20:34:39.139010242 +0000
+++ ./tokens/css/variables-browser.css 2026-03-11 20:34:03.509826139 +0000
@@ -1,130 +1,38 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:34:03 GMT+0000 (Coordinated Universal Time)
*/
:root {
- --leo-font-default-link: 400 14px/16.8px Inter Variable;
- --leo-font-default-regular: 400 14px/16.8px Inter Variable;
- --leo-font-default-semibold: 600 14px/16.8px Inter Variable;
- --leo-font-large-link: 400 16px/19.2px Inter Variable;
- --leo-font-large-regular: 400 16px/19.2px Inter Variable;
- --leo-font-large-semibold: 600 16px/19.2px Inter Variable;
- --leo-font-sidebar-product-title: 600 19px/19px Poppins;
- --leo-font-small-link: 400 13px/15.6px Inter Variable;
- --leo-font-small-regular: 400 13px/15.6px Inter Variable;
- --leo-font-small-semibold: 600 13px/15.6px Inter Variable;
- --leo-font-x-small-link: 400 12px/14.4px Inter Variable;
- --leo-font-x-small-regular: 400 12px/14.4px Inter Variable;
- --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-line-height: 16.8px;
- --leo-typography-default-link-paragraph-indent: 0;
- --leo-typography-default-link-paragraph-spacing: 0;
- --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-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-large-link-font-size: 16px;
- --leo-typography-large-link-font-weight: 400;
- --leo-typography-large-link-letter-spacing: 0;
- --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-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-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-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-small-link-font-size: 13px;
- --leo-typography-small-link-font-weight: 400;
- --leo-typography-small-link-letter-spacing: 0;
- --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-regular-font-size: 13px;
- --leo-typography-small-regular-font-weight: 400;
- --leo-typography-small-regular-letter-spacing: 0;
- --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-semibold-font-size: 13px;
- --leo-typography-small-semibold-font-weight: 600;
- --leo-typography-small-semibold-letter-spacing: 0;
- --leo-typography-small-semibold-line-height: 15.6px;
- --leo-typography-small-semibold-paragraph-indent: 0;
- --leo-typography-small-semibold-paragraph-spacing: 0;
- --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-line-height: 14.4px;
- --leo-typography-x-small-link-paragraph-indent: 0;
- --leo-typography-x-small-link-paragraph-spacing: 0;
- --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-line-height: 14.4px;
- --leo-typography-x-small-regular-paragraph-indent: 0;
- --leo-typography-x-small-regular-paragraph-spacing: 0;
- --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-line-height: 14.4px;
- --leo-typography-x-small-semibold-paragraph-indent: 0;
- --leo-typography-x-small-semibold-paragraph-spacing: 0;
+ --leo-font-browser-menu-item: 400 13px/15.6px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-typography-browser-menu-item-font-size: 13px;
+ --leo-typography-browser-menu-item-font-weight: 400;
+ --leo-typography-browser-menu-item-letter-spacing: -0.23px;
+ --leo-typography-browser-menu-item-line-height: 15.6px;
+ --leo-typography-browser-menu-item-paragraph-indent: 0;
+ --leo-typography-browser-menu-item-paragraph-spacing: 0;
}
@media (prefers-color-scheme: light) {
:root {
- --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
- --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
- --leo-effect-url-bar-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 4px 8px -2px rgba(0, 0, 0, 0.1);
+ --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.2);
}
}
@media (prefers-color-scheme: dark) {
:root {
- --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
- --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
- --leo-effect-url-bar-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 4px 8px -2px rgba(0, 0, 0, 0.1);
+ --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.2);
}
}
[data-theme="light"] {
- --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
- --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
- --leo-effect-url-bar-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 4px 8px -2px rgba(0, 0, 0, 0.1);
+ --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.2);
}
[data-theme="dark"] {
- --leo-effect-active-tab-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
--leo-effect-browser-frame-shadow-0: 0px 0px 0px 0.75px rgba(6, 6, 5, 0.2);
- --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.32);
- --leo-effect-url-bar-shadow: 0px 1px 2px -1px rgba(0, 0, 0, 0.1), 0px 4px 8px -2px rgba(0, 0, 0, 0.1);
+ --leo-effect-browser-frame-shadow-1: inset 0px 1px 0.5px 0px rgba(255, 255, 255, 0.2);
}
Variables Diff: variables-ios.diff--- ./tokens/css/variables-ios.old.css 2026-03-11 20:34:39.374366177 +0000
+++ ./tokens/css/variables-ios.css 2026-03-11 20:34:03.531826565 +0000
@@ -1,126 +1,245 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:34:03 GMT+0000 (Coordinated Universal Time)
*/
:root {
- --leo-font-ios-default-regular: 400 15px/20px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-default-semibold: 600 15px/20px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-heading-display1: 500 44px/52px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-heading-display2: 500 36px/44px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-heading-h1: 500 32px/40px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-heading-h2: 500 28px/34px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-heading-h3: 500 22px/28px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-heading-h4: 500 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-large-regular: 400 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-large-semibold: 600 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-monospace-default: 400 15px/20px SF Mono;
- --leo-font-ios-monospace-large: 400 17px/22px SF Mono;
- --leo-font-ios-monospace-small: 400 13px/18px SF Mono;
- --leo-font-ios-small-regular: 400 13px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-small-semibold: 600 13px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-x-small-regular: 400 11px/13px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-ios-x-small-semibold: 600 11px/13px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-typography-ios-default-regular-font-size: 15px;
- --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-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-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-line-height: 52px;
- --leo-typography-ios-heading-display1-paragraph-indent: 0;
- --leo-typography-ios-heading-display1-paragraph-spacing: 0;
- --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-line-height: 44px;
- --leo-typography-ios-heading-display2-paragraph-indent: 0;
- --leo-typography-ios-heading-display2-paragraph-spacing: 0;
- --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-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-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-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-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-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-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-line-height: 20px;
- --leo-typography-ios-monospace-default-paragraph-indent: 0;
- --leo-typography-ios-monospace-default-paragraph-spacing: 0;
- --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-line-height: 22px;
- --leo-typography-ios-monospace-large-paragraph-indent: 0;
- --leo-typography-ios-monospace-large-paragraph-spacing: 0;
- --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-line-height: 18px;
- --leo-typography-ios-monospace-small-paragraph-indent: 0;
- --leo-typography-ios-monospace-small-paragraph-spacing: 0;
- --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-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-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-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-font-body-emphasized: 600 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-body-emphasized-italic: italic 600 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-body-italic: italic 400 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-body-regular: 400 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-callout-emphasized: 600 16px/21px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-callout-emphasized-italic: italic 600 16px/21px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-callout-italic: italic 400 16px/21px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-callout-regular: 400 16px/21px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption1-emphasized: 500 12px/16px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption1-emphasized-italic: italic 500 12px/16px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption1-italic: italic 400 12px/16px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption1-regular: 400 12px/16px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption2-emphasized: 600 11px/13px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption2-emphasized-italic: italic 600 11px/13px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption2-italic: italic 400 11px/13px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-caption2-regular: 400 11px/13px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-footnote-emphasized: 600 13px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-footnote-emphasized-italic: italic 600 13px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-footnote-italic: italic 400 13px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-footnote-regular: 400 13px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-headline-italic: italic 600 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-headline-regular: 600 17px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-large-title-emphasized: 700 34px/41px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-large-title-regular: 400 34px/41px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-subheadline-emphaized-italic: italic 600 15px/20px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-subheadline-emphasized: 600 15px/20px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-subheadline-italic: italic 400 15px/20px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-subheadline-regular: 400 15px/20px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-title1-emphasized: 700 28px/34px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-title1-regular: 400 28px/34px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-title2-emphasized: 700 22px/28px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-title2-regular: 400 22px/28px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-title3-emphasized: 600 20px/25px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-title3-regular: 400 20px/25px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-typography-body-emphasized-font-size: 17px;
+ --leo-typography-body-emphasized-font-weight: 600;
+ --leo-typography-body-emphasized-italic-font-size: 17px;
+ --leo-typography-body-emphasized-italic-font-weight: 600;
+ --leo-typography-body-emphasized-italic-letter-spacing: -0.43px;
+ --leo-typography-body-emphasized-italic-line-height: 22px;
+ --leo-typography-body-emphasized-italic-paragraph-indent: 0;
+ --leo-typography-body-emphasized-italic-paragraph-spacing: 0;
+ --leo-typography-body-emphasized-letter-spacing: -0.43px;
+ --leo-typography-body-emphasized-line-height: 22px;
+ --leo-typography-body-emphasized-paragraph-indent: 0;
+ --leo-typography-body-emphasized-paragraph-spacing: 0;
+ --leo-typography-body-italic-font-size: 17px;
+ --leo-typography-body-italic-font-weight: 400;
+ --leo-typography-body-italic-letter-spacing: -0.43px;
+ --leo-typography-body-italic-line-height: 22px;
+ --leo-typography-body-italic-paragraph-indent: 0;
+ --leo-typography-body-italic-paragraph-spacing: 0;
+ --leo-typography-body-regular-font-size: 17px;
+ --leo-typography-body-regular-font-weight: 400;
+ --leo-typography-body-regular-letter-spacing: -0.43px;
+ --leo-typography-body-regular-line-height: 22px;
+ --leo-typography-body-regular-paragraph-indent: 0;
+ --leo-typography-body-regular-paragraph-spacing: 0;
+ --leo-typography-callout-emphasized-font-size: 16px;
+ --leo-typography-callout-emphasized-font-weight: 600;
+ --leo-typography-callout-emphasized-italic-font-size: 16px;
+ --leo-typography-callout-emphasized-italic-font-weight: 600;
+ --leo-typography-callout-emphasized-italic-letter-spacing: -0.31px;
+ --leo-typography-callout-emphasized-italic-line-height: 21px;
+ --leo-typography-callout-emphasized-italic-paragraph-indent: 0;
+ --leo-typography-callout-emphasized-italic-paragraph-spacing: 0;
+ --leo-typography-callout-emphasized-letter-spacing: -0.31px;
+ --leo-typography-callout-emphasized-line-height: 21px;
+ --leo-typography-callout-emphasized-paragraph-indent: 0;
+ --leo-typography-callout-emphasized-paragraph-spacing: 0;
+ --leo-typography-callout-italic-font-size: 16px;
+ --leo-typography-callout-italic-font-weight: 400;
+ --leo-typography-callout-italic-letter-spacing: -0.31px;
+ --leo-typography-callout-italic-line-height: 21px;
+ --leo-typography-callout-italic-paragraph-indent: 0;
+ --leo-typography-callout-italic-paragraph-spacing: 0;
+ --leo-typography-callout-regular-font-size: 16px;
+ --leo-typography-callout-regular-font-weight: 400;
+ --leo-typography-callout-regular-letter-spacing: -0.31px;
+ --leo-typography-callout-regular-line-height: 21px;
+ --leo-typography-callout-regular-paragraph-indent: 0;
+ --leo-typography-callout-regular-paragraph-spacing: 0;
+ --leo-typography-caption1-emphasized-font-size: 12px;
+ --leo-typography-caption1-emphasized-font-weight: 500;
+ --leo-typography-caption1-emphasized-italic-font-size: 12px;
+ --leo-typography-caption1-emphasized-italic-font-weight: 500;
+ --leo-typography-caption1-emphasized-italic-letter-spacing: 0;
+ --leo-typography-caption1-emphasized-italic-line-height: 16px;
+ --leo-typography-caption1-emphasized-italic-paragraph-indent: 0;
+ --leo-typography-caption1-emphasized-italic-paragraph-spacing: 0;
+ --leo-typography-caption1-emphasized-letter-spacing: 0;
+ --leo-typography-caption1-emphasized-line-height: 16px;
+ --leo-typography-caption1-emphasized-paragraph-indent: 0;
+ --leo-typography-caption1-emphasized-paragraph-spacing: 0;
+ --leo-typography-caption1-italic-font-size: 12px;
+ --leo-typography-caption1-italic-font-weight: 400;
+ --leo-typography-caption1-italic-letter-spacing: 0;
+ --leo-typography-caption1-italic-line-height: 16px;
+ --leo-typography-caption1-italic-paragraph-indent: 0;
+ --leo-typography-caption1-italic-paragraph-spacing: 0;
+ --leo-typography-caption1-regular-font-size: 12px;
+ --leo-typography-caption1-regular-font-weight: 400;
+ --leo-typography-caption1-regular-letter-spacing: 0;
+ --leo-typography-caption1-regular-line-height: 16px;
+ --leo-typography-caption1-regular-paragraph-indent: 0;
+ --leo-typography-caption1-regular-paragraph-spacing: 0;
+ --leo-typography-caption2-emphasized-font-size: 11px;
+ --leo-typography-caption2-emphasized-font-weight: 600;
+ --leo-typography-caption2-emphasized-italic-font-size: 11px;
+ --leo-typography-caption2-emphasized-italic-font-weight: 600;
+ --leo-typography-caption2-emphasized-italic-letter-spacing: 0.06px;
+ --leo-typography-caption2-emphasized-italic-line-height: 13px;
+ --leo-typography-caption2-emphasized-italic-paragraph-indent: 0;
+ --leo-typography-caption2-emphasized-italic-paragraph-spacing: 0;
+ --leo-typography-caption2-emphasized-letter-spacing: 0.06px;
+ --leo-typography-caption2-emphasized-line-height: 13px;
+ --leo-typography-caption2-emphasized-paragraph-indent: 0;
+ --leo-typography-caption2-emphasized-paragraph-spacing: 0;
+ --leo-typography-caption2-italic-font-size: 11px;
+ --leo-typography-caption2-italic-font-weight: 400;
+ --leo-typography-caption2-italic-letter-spacing: 0.06px;
+ --leo-typography-caption2-italic-line-height: 13px;
+ --leo-typography-caption2-italic-paragraph-indent: 0;
+ --leo-typography-caption2-italic-paragraph-spacing: 0;
+ --leo-typography-caption2-regular-font-size: 11px;
+ --leo-typography-caption2-regular-font-weight: 400;
+ --leo-typography-caption2-regular-letter-spacing: 0.06px;
+ --leo-typography-caption2-regular-line-height: 13px;
+ --leo-typography-caption2-regular-paragraph-indent: 0;
+ --leo-typography-caption2-regular-paragraph-spacing: 0;
+ --leo-typography-footnote-emphasized-font-size: 13px;
+ --leo-typography-footnote-emphasized-font-weight: 600;
+ --leo-typography-footnote-emphasized-italic-font-size: 13px;
+ --leo-typography-footnote-emphasized-italic-font-weight: 600;
+ --leo-typography-footnote-emphasized-italic-letter-spacing: -0.08px;
+ --leo-typography-footnote-emphasized-italic-line-height: 18px;
+ --leo-typography-footnote-emphasized-italic-paragraph-indent: 0;
+ --leo-typography-footnote-emphasized-italic-paragraph-spacing: 0;
+ --leo-typography-footnote-emphasized-letter-spacing: -0.08px;
+ --leo-typography-footnote-emphasized-line-height: 18px;
+ --leo-typography-footnote-emphasized-paragraph-indent: 0;
+ --leo-typography-footnote-emphasized-paragraph-spacing: 0;
+ --leo-typography-footnote-italic-font-size: 13px;
+ --leo-typography-footnote-italic-font-weight: 400;
+ --leo-typography-footnote-italic-letter-spacing: -0.08px;
+ --leo-typography-footnote-italic-line-height: 18px;
+ --leo-typography-footnote-italic-paragraph-indent: 0;
+ --leo-typography-footnote-italic-paragraph-spacing: 0;
+ --leo-typography-footnote-regular-font-size: 13px;
+ --leo-typography-footnote-regular-font-weight: 400;
+ --leo-typography-footnote-regular-letter-spacing: -0.08px;
+ --leo-typography-footnote-regular-line-height: 18px;
+ --leo-typography-footnote-regular-paragraph-indent: 0;
+ --leo-typography-footnote-regular-paragraph-spacing: 0;
+ --leo-typography-headline-italic-font-size: 17px;
+ --leo-typography-headline-italic-font-weight: 600;
+ --leo-typography-headline-italic-letter-spacing: -0.43px;
+ --leo-typography-headline-italic-line-height: 22px;
+ --leo-typography-headline-italic-paragraph-indent: 0;
+ --leo-typography-headline-italic-paragraph-spacing: 0;
+ --leo-typography-headline-regular-font-size: 17px;
+ --leo-typography-headline-regular-font-weight: 600;
+ --leo-typography-headline-regular-letter-spacing: -0.43px;
+ --leo-typography-headline-regular-line-height: 22px;
+ --leo-typography-headline-regular-paragraph-indent: 0;
+ --leo-typography-headline-regular-paragraph-spacing: 0;
+ --leo-typography-large-title-emphasized-font-size: 34px;
+ --leo-typography-large-title-emphasized-font-weight: 700;
+ --leo-typography-large-title-emphasized-letter-spacing: 0.4px;
+ --leo-typography-large-title-emphasized-line-height: 41px;
+ --leo-typography-large-title-emphasized-paragraph-indent: 0;
+ --leo-typography-large-title-emphasized-paragraph-spacing: 0;
+ --leo-typography-large-title-regular-font-size: 34px;
+ --leo-typography-large-title-regular-font-weight: 400;
+ --leo-typography-large-title-regular-letter-spacing: 0.4px;
+ --leo-typography-large-title-regular-line-height: 41px;
+ --leo-typography-large-title-regular-paragraph-indent: 0;
+ --leo-typography-large-title-regular-paragraph-spacing: 0;
+ --leo-typography-subheadline-emphaized-italic-font-size: 15px;
+ --leo-typography-subheadline-emphaized-italic-font-weight: 600;
+ --leo-typography-subheadline-emphaized-italic-letter-spacing: -0.23px;
+ --leo-typography-subheadline-emphaized-italic-line-height: 20px;
+ --leo-typography-subheadline-emphaized-italic-paragraph-indent: 0;
+ --leo-typography-subheadline-emphaized-italic-paragraph-spacing: 0;
+ --leo-typography-subheadline-emphasized-font-size: 15px;
+ --leo-typography-subheadline-emphasized-font-weight: 600;
+ --leo-typography-subheadline-emphasized-letter-spacing: -0.23px;
+ --leo-typography-subheadline-emphasized-line-height: 20px;
+ --leo-typography-subheadline-emphasized-paragraph-indent: 0;
+ --leo-typography-subheadline-emphasized-paragraph-spacing: 0;
+ --leo-typography-subheadline-italic-font-size: 15px;
+ --leo-typography-subheadline-italic-font-weight: 400;
+ --leo-typography-subheadline-italic-letter-spacing: -0.23px;
+ --leo-typography-subheadline-italic-line-height: 20px;
+ --leo-typography-subheadline-italic-paragraph-indent: 0;
+ --leo-typography-subheadline-italic-paragraph-spacing: 0;
+ --leo-typography-subheadline-regular-font-size: 15px;
+ --leo-typography-subheadline-regular-font-weight: 400;
+ --leo-typography-subheadline-regular-letter-spacing: -0.23px;
+ --leo-typography-subheadline-regular-line-height: 20px;
+ --leo-typography-subheadline-regular-paragraph-indent: 0;
+ --leo-typography-subheadline-regular-paragraph-spacing: 0;
+ --leo-typography-title1-emphasized-font-size: 28px;
+ --leo-typography-title1-emphasized-font-weight: 700;
+ --leo-typography-title1-emphasized-letter-spacing: 0.38px;
+ --leo-typography-title1-emphasized-line-height: 34px;
+ --leo-typography-title1-emphasized-paragraph-indent: 0;
+ --leo-typography-title1-emphasized-paragraph-spacing: 0;
+ --leo-typography-title1-regular-font-size: 28px;
+ --leo-typography-title1-regular-font-weight: 400;
+ --leo-typography-title1-regular-letter-spacing: 0.38px;
+ --leo-typography-title1-regular-line-height: 34px;
+ --leo-typography-title1-regular-paragraph-indent: 0;
+ --leo-typography-title1-regular-paragraph-spacing: 0;
+ --leo-typography-title2-emphasized-font-size: 22px;
+ --leo-typography-title2-emphasized-font-weight: 700;
+ --leo-typography-title2-emphasized-letter-spacing: -0.26px;
+ --leo-typography-title2-emphasized-line-height: 28px;
+ --leo-typography-title2-emphasized-paragraph-indent: 0;
+ --leo-typography-title2-emphasized-paragraph-spacing: 0;
+ --leo-typography-title2-regular-font-size: 22px;
+ --leo-typography-title2-regular-font-weight: 400;
+ --leo-typography-title2-regular-letter-spacing: -0.26px;
+ --leo-typography-title2-regular-line-height: 28px;
+ --leo-typography-title2-regular-paragraph-indent: 0;
+ --leo-typography-title2-regular-paragraph-spacing: 0;
+ --leo-typography-title3-emphasized-font-size: 20px;
+ --leo-typography-title3-emphasized-font-weight: 600;
+ --leo-typography-title3-emphasized-letter-spacing: -0.45px;
+ --leo-typography-title3-emphasized-line-height: 25px;
+ --leo-typography-title3-emphasized-paragraph-indent: 0;
+ --leo-typography-title3-emphasized-paragraph-spacing: 0;
+ --leo-typography-title3-regular-font-size: 20px;
+ --leo-typography-title3-regular-font-weight: 400;
+ --leo-typography-title3-regular-letter-spacing: -0.45px;
+ --leo-typography-title3-regular-line-height: 25px;
+ --leo-typography-title3-regular-paragraph-indent: 0;
+ --leo-typography-title3-regular-paragraph-spacing: 0;
}
Variables Diff: variables-marketing.diff--- ./tokens/css/variables-marketing.old.css 2026-03-11 20:34:39.634877677 +0000
+++ ./tokens/css/variables-marketing.css 2026-03-11 20:34:03.563827186 +0000
@@ -1,219 +1,361 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:34:03 GMT+0000 (Coordinated Universal Time)
*/
:root {
- --leo-font-desktop-primary-blockquote: 600 20px/30px Poppins;
- --leo-font-desktop-primary-h1: 600 80px/100px Poppins;
- --leo-font-desktop-primary-h2: 600 70px/90px Poppins;
- --leo-font-desktop-primary-h3: 600 40px/44px Poppins;
- --leo-font-desktop-primary-h4: 600 30px/40px Poppins;
- --leo-font-desktop-primary-h5: 600 24px/30px Poppins;
- --leo-font-desktop-primary-hero: 600 120px/130px Poppins;
- --leo-font-desktop-primary-text-default: 400 20px/30px Poppins;
- --leo-font-desktop-primary-text-small: 700 15px/20px Poppins;
- --leo-font-desktop-secondary-h1: 500 100px/95px Flecha M;
- --leo-font-desktop-secondary-h2: 500 80px/75px Flecha M;
- --leo-font-desktop-secondary-h3: 500 70px/75px Flecha M;
- --leo-font-desktop-secondary-h4: 500 40px/45px Flecha M;
- --leo-font-desktop-secondary-h5: 500 30px/40px Flecha M;
- --leo-font-desktop-secondary-hero: 500 120px/103px Flecha M;
- --leo-font-mobile-primary-blockquote: 600 20px/28px Poppins;
- --leo-font-mobile-primary-h1: 600 36px/45px Poppins;
- --leo-font-mobile-primary-h2: 600 30px/40px Poppins;
- --leo-font-mobile-primary-h3: 600 24px/35px Poppins;
- --leo-font-mobile-primary-h4: 600 20px/25px Poppins;
- --leo-font-mobile-primary-h5: 600 18px/20px Poppins;
- --leo-font-mobile-primary-hero: 600 54px/65px Poppins;
- --leo-font-mobile-primary-text-default: 400 18px/28px Poppins;
- --leo-font-mobile-primary-text-small: 700 15px/20px Poppins;
- --leo-font-mobile-secondary-h1: 500 40px/45px Flecha M;
- --leo-font-mobile-secondary-h2: 500 36px/40px Flecha M;
- --leo-font-mobile-secondary-h3: 500 30px/30px Flecha M;
- --leo-font-mobile-secondary-h4: 500 24px/30px Flecha M;
- --leo-font-mobile-secondary-h5: 500 20px/25px Flecha M;
- --leo-font-mobile-secondary-hero: 500 54px/50px Flecha M;
- --leo-typography-desktop-primary-blockquote-font-size: 20px;
- --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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-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-line-height: 20px;
- --leo-typography-mobile-primary-text-small-paragraph-indent: 0;
- --leo-typography-mobile-primary-text-small-paragraph-spacing: 0;
- --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-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-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-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-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-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-font-default-link: 400 14px/22px Inter Variable;
+ --leo-font-default-regular: 400 14px/22px Inter Variable;
+ --leo-font-default-semibold: 600 14px/22px Inter Variable;
+ --leo-font-display-primary-blockquote: 600 20px/30px Inter Variable;
+ --leo-font-display-primary-h1: 600 80px/100px Inter Variable;
+ --leo-font-display-primary-h2: 600 70px/90px Inter Variable;
+ --leo-font-display-primary-h3: 600 40px/70px Inter Variable;
+ --leo-font-display-primary-h4: 600 30px/40px Inter Variable;
+ --leo-font-display-primary-h5: 600 24px/30px Inter Variable;
+ --leo-font-display-primary-hero: 600 120px/130px Inter Variable;
+ --leo-font-display-primary-text-default: 400 20px/30px Inter Variable;
+ --leo-font-display-primary-text-small: 700 15px/20px Inter Variable;
+ --leo-font-display-secondary-h1: 500 100px/95px Flecha M;
+ --leo-font-display-secondary-h2: 500 80px/75px Flecha M;
+ --leo-font-display-secondary-h3: 500 70px/75px Flecha M;
+ --leo-font-display-secondary-h4: 500 40px/45px Flecha M;
+ --leo-font-display-secondary-h5: 500 30px/40px Flecha M;
+ --leo-font-display-secondary-hero: 500 120px/103px Flecha M;
+ --leo-font-heading-display1: 600 46px/54px Inter Variable;
+ --leo-font-heading-display2: 600 40px/48px Inter Variable;
+ --leo-font-heading-display3: 600 34px/40px Inter Variable;
+ --leo-font-heading-h1: 600 28px/34px Inter Variable;
+ --leo-font-heading-h2: 600 22px/28px Inter Variable;
+ --leo-font-heading-h3: 600 20px/26px Inter Variable;
+ --leo-font-heading-h4: 600 16px/24px Inter Variable;
+ --leo-font-large-link: 400 16px/24px Inter Variable;
+ --leo-font-large-regular: 400 16px/24px Inter Variable;
+ --leo-font-large-semibold: 600 16px/24px Inter Variable;
+ --leo-font-monospace-default: 400 14px/22px 'SF Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+ --leo-font-monospace-large: 400 16px/24px 'SF Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+ --leo-font-monospace-small: 400 12px/18px 'SF Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+ --leo-font-small-link: 400 12px/18px Inter Variable;
+ --leo-font-small-regular: 400 12px/18px Inter Variable;
+ --leo-font-small-semibold: 600 12px/18px Inter Variable;
+ --leo-font-x-large-link: 400 20px/30px Inter Variable;
+ --leo-font-x-large-regular: 400 20px/30px Inter Variable;
+ --leo-font-x-large-semibold: 600 20px/30px Inter Variable;
+ --leo-font-x-small-link: 400 11px/16px Inter Variable;
+ --leo-font-x-small-regular: 400 11px/16px Inter Variable;
+ --leo-font-x-small-semibold: 600 11px/16px Inter Variable;
+ --leo-typography-default-link-font-size: 14px;
+ --leo-typography-default-link-font-weight: 400;
+ --leo-typography-default-link-letter-spacing: -0.23px;
+ --leo-typography-default-link-line-height: 22px;
+ --leo-typography-default-link-paragraph-indent: 0;
+ --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.23px;
+ --leo-typography-default-regular-line-height: 22px;
+ --leo-typography-default-regular-paragraph-indent: 0;
+ --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.23px;
+ --leo-typography-default-semibold-line-height: 22px;
+ --leo-typography-default-semibold-paragraph-indent: 0;
+ --leo-typography-default-semibold-paragraph-spacing: 8px;
+ --leo-typography-display-primary-blockquote-font-size: 20px;
+ --leo-typography-display-primary-blockquote-font-weight: 600;
+ --leo-typography-display-primary-blockquote-letter-spacing: -0.4px;
+ --leo-typography-display-primary-blockquote-line-height: 30px;
+ --leo-typography-display-primary-blockquote-paragraph-indent: 0;
+ --leo-typography-display-primary-blockquote-paragraph-spacing: 8px;
+ --leo-typography-display-primary-h1-font-size: 80px;
+ --leo-typography-display-primary-h1-font-weight: 600;
+ --leo-typography-display-primary-h1-letter-spacing: -1.6px;
+ --leo-typography-display-primary-h1-line-height: 100px;
+ --leo-typography-display-primary-h1-paragraph-indent: 0;
+ --leo-typography-display-primary-h1-paragraph-spacing: 0;
+ --leo-typography-display-primary-h2-font-size: 70px;
+ --leo-typography-display-primary-h2-font-weight: 600;
+ --leo-typography-display-primary-h2-letter-spacing: -1.4px;
+ --leo-typography-display-primary-h2-line-height: 90px;
+ --leo-typography-display-primary-h2-paragraph-indent: 0;
+ --leo-typography-display-primary-h2-paragraph-spacing: 0;
+ --leo-typography-display-primary-h3-font-size: 40px;
+ --leo-typography-display-primary-h3-font-weight: 600;
+ --leo-typography-display-primary-h3-letter-spacing: -0.8px;
+ --leo-typography-display-primary-h3-line-height: 70px;
+ --leo-typography-display-primary-h3-paragraph-indent: 0;
+ --leo-typography-display-primary-h3-paragraph-spacing: 0;
+ --leo-typography-display-primary-h4-font-size: 30px;
+ --leo-typography-display-primary-h4-font-weight: 600;
+ --leo-typography-display-primary-h4-letter-spacing: -0.6px;
+ --leo-typography-display-primary-h4-line-height: 40px;
+ --leo-typography-display-primary-h4-paragraph-indent: 0;
+ --leo-typography-display-primary-h4-paragraph-spacing: 0;
+ --leo-typography-display-primary-h5-font-size: 24px;
+ --leo-typography-display-primary-h5-font-weight: 600;
+ --leo-typography-display-primary-h5-letter-spacing: -0.48px;
+ --leo-typography-display-primary-h5-line-height: 30px;
+ --leo-typography-display-primary-h5-paragraph-indent: 0;
+ --leo-typography-display-primary-h5-paragraph-spacing: 0;
+ --leo-typography-display-primary-hero-font-size: 120px;
+ --leo-typography-display-primary-hero-font-weight: 600;
+ --leo-typography-display-primary-hero-letter-spacing: -2.4px;
+ --leo-typography-display-primary-hero-line-height: 130px;
+ --leo-typography-display-primary-hero-paragraph-indent: 0;
+ --leo-typography-display-primary-hero-paragraph-spacing: 0;
+ --leo-typography-display-primary-text-default-font-size: 20px;
+ --leo-typography-display-primary-text-default-font-weight: 400;
+ --leo-typography-display-primary-text-default-letter-spacing: -0.4px;
+ --leo-typography-display-primary-text-default-line-height: 30px;
+ --leo-typography-display-primary-text-default-paragraph-indent: 0;
+ --leo-typography-display-primary-text-default-paragraph-spacing: 8px;
+ --leo-typography-display-primary-text-small-font-size: 15px;
+ --leo-typography-display-primary-text-small-font-weight: 700;
+ --leo-typography-display-primary-text-small-letter-spacing: -0.3px;
+ --leo-typography-display-primary-text-small-line-height: 20px;
+ --leo-typography-display-primary-text-small-paragraph-indent: 0;
+ --leo-typography-display-primary-text-small-paragraph-spacing: 8px;
+ --leo-typography-display-secondary-h1-font-size: 100px;
+ --leo-typography-display-secondary-h1-font-weight: 500;
+ --leo-typography-display-secondary-h1-letter-spacing: -2px;
+ --leo-typography-display-secondary-h1-line-height: 95px;
+ --leo-typography-display-secondary-h1-paragraph-indent: 0;
+ --leo-typography-display-secondary-h1-paragraph-spacing: 0;
+ --leo-typography-display-secondary-h2-font-size: 80px;
+ --leo-typography-display-secondary-h2-font-weight: 500;
+ --leo-typography-display-secondary-h2-letter-spacing: -1.6px;
+ --leo-typography-display-secondary-h2-line-height: 75px;
+ --leo-typography-display-secondary-h2-paragraph-indent: 0;
+ --leo-typography-display-secondary-h2-paragraph-spacing: 0;
+ --leo-typography-display-secondary-h3-font-size: 70px;
+ --leo-typography-display-secondary-h3-font-weight: 500;
+ --leo-typography-display-secondary-h3-letter-spacing: -1.4px;
+ --leo-typography-display-secondary-h3-line-height: 75px;
+ --leo-typography-display-secondary-h3-paragraph-indent: 0;
+ --leo-typography-display-secondary-h3-paragraph-spacing: 0;
+ --leo-typography-display-secondary-h4-font-size: 40px;
+ --leo-typography-display-secondary-h4-font-weight: 500;
+ --leo-typography-display-secondary-h4-letter-spacing: -0.8px;
+ --leo-typography-display-secondary-h4-line-height: 45px;
+ --leo-typography-display-secondary-h4-paragraph-indent: 0;
+ --leo-typography-display-secondary-h4-paragraph-spacing: 0;
+ --leo-typography-display-secondary-h5-font-size: 30px;
+ --leo-typography-display-secondary-h5-font-weight: 500;
+ --leo-typography-display-secondary-h5-letter-spacing: -0.6px;
+ --leo-typography-display-secondary-h5-line-height: 40px;
+ --leo-typography-display-secondary-h5-paragraph-indent: 0;
+ --leo-typography-display-secondary-h5-paragraph-spacing: 0;
+ --leo-typography-display-secondary-hero-font-size: 120px;
+ --leo-typography-display-secondary-hero-font-weight: 500;
+ --leo-typography-display-secondary-hero-letter-spacing: -2.4px;
+ --leo-typography-display-secondary-hero-line-height: 103px;
+ --leo-typography-display-secondary-hero-paragraph-indent: 0;
+ --leo-typography-display-secondary-hero-paragraph-spacing: 0;
+ --leo-typography-font-size-primary-blockquote: 20px;
+ --leo-typography-font-size-primary-default: 20px;
+ --leo-typography-font-size-primary-h1: 80px;
+ --leo-typography-font-size-primary-h2: 70px;
+ --leo-typography-font-size-primary-h3: 40px;
+ --leo-typography-font-size-primary-h4: 30px;
+ --leo-typography-font-size-primary-h5: 24px;
+ --leo-typography-font-size-primary-hero: 120px;
+ --leo-typography-font-size-primary-small: 15px;
+ --leo-typography-font-size-secondary-blockquote: 20px;
+ --leo-typography-font-size-secondary-default: 20px;
+ --leo-typography-font-size-secondary-h1: 100px;
+ --leo-typography-font-size-secondary-h2: 80px;
+ --leo-typography-font-size-secondary-h3: 70px;
+ --leo-typography-font-size-secondary-h4: 40px;
+ --leo-typography-font-size-secondary-h5: 30px;
+ --leo-typography-font-size-secondary-hero: 120px;
+ --leo-typography-font-size-secondary-small: 15px;
+ --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: 8px;
+ --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: 8px;
+ --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: 8px;
+ --leo-typography-heading-h1-font-size: 28px;
+ --leo-typography-heading-h1-font-weight: 600;
+ --leo-typography-heading-h1-letter-spacing: -0.5px;
+ --leo-typography-heading-h1-line-height: 34px;
+ --leo-typography-heading-h1-paragraph-indent: 0;
+ --leo-typography-heading-h1-paragraph-spacing: 8px;
+ --leo-typography-heading-h2-font-size: 22px;
+ --leo-typography-heading-h2-font-weight: 600;
+ --leo-typography-heading-h2-letter-spacing: -0.5px;
+ --leo-typography-heading-h2-line-height: 28px;
+ --leo-typography-heading-h2-paragraph-indent: 0;
+ --leo-typography-heading-h2-paragraph-spacing: 8px;
+ --leo-typography-heading-h3-font-size: 20px;
+ --leo-typography-heading-h3-font-weight: 600;
+ --leo-typography-heading-h3-letter-spacing: -0.5px;
+ --leo-typography-heading-h3-line-height: 26px;
+ --leo-typography-heading-h3-paragraph-indent: 0;
+ --leo-typography-heading-h3-paragraph-spacing: 8px;
+ --leo-typography-heading-h4-font-size: 16px;
+ --leo-typography-heading-h4-font-weight: 600;
+ --leo-typography-heading-h4-letter-spacing: -0.23px;
+ --leo-typography-heading-h4-line-height: 24px;
+ --leo-typography-heading-h4-paragraph-indent: 0;
+ --leo-typography-heading-h4-paragraph-spacing: 8px;
+ --leo-typography-large-link-font-size: 16px;
+ --leo-typography-large-link-font-weight: 400;
+ --leo-typography-large-link-letter-spacing: -0.23px;
+ --leo-typography-large-link-line-height: 24px;
+ --leo-typography-large-link-paragraph-indent: 0;
+ --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.23px;
+ --leo-typography-large-regular-line-height: 24px;
+ --leo-typography-large-regular-paragraph-indent: 0;
+ --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.23px;
+ --leo-typography-large-semibold-line-height: 24px;
+ --leo-typography-large-semibold-paragraph-indent: 0;
+ --leo-typography-large-semibold-paragraph-spacing: 8px;
+ --leo-typography-line-height-primary-blockquote: 30px;
+ --leo-typography-line-height-primary-default: 30px;
+ --leo-typography-line-height-primary-h1: 100px;
+ --leo-typography-line-height-primary-h2: 90px;
+ --leo-typography-line-height-primary-h3: 44px;
+ --leo-typography-line-height-primary-h4: 40px;
+ --leo-typography-line-height-primary-h5: 30px;
+ --leo-typography-line-height-primary-hero: 130px;
+ --leo-typography-line-height-primary-small: 20px;
+ --leo-typography-line-height-secondary-blockquote: 20px;
+ --leo-typography-line-height-secondary-default: 20px;
+ --leo-typography-line-height-secondary-h1: 95px;
+ --leo-typography-line-height-secondary-h2: 75px;
+ --leo-typography-line-height-secondary-h3: 75px;
+ --leo-typography-line-height-secondary-h4: 45px;
+ --leo-typography-line-height-secondary-h5: 40px;
+ --leo-typography-line-height-secondary-hero: 103px;
+ --leo-typography-line-height-secondary-small: 15px;
+ --leo-typography-mobile-font-size-primary-blockquote: 20px;
+ --leo-typography-mobile-font-size-primary-default: 18px;
+ --leo-typography-mobile-font-size-primary-h1: 36px;
+ --leo-typography-mobile-font-size-primary-h2: 30px;
+ --leo-typography-mobile-font-size-primary-h3: 24px;
+ --leo-typography-mobile-font-size-primary-h4: 20px;
+ --leo-typography-mobile-font-size-primary-h5: 18px;
+ --leo-typography-mobile-font-size-primary-hero: 54px;
+ --leo-typography-mobile-font-size-primary-small: 18px;
+ --leo-typography-mobile-font-size-secondary-blockquote: 20px;
+ --leo-typography-mobile-font-size-secondary-default: 18px;
+ --leo-typography-mobile-font-size-secondary-h1: 36px;
+ --leo-typography-mobile-font-size-secondary-h2: 36px;
+ --leo-typography-mobile-font-size-secondary-h3: 30px;
+ --leo-typography-mobile-font-size-secondary-h4: 24px;
+ --leo-typography-mobile-font-size-secondary-h5: 20px;
+ --leo-typography-mobile-font-size-secondary-hero: 54px;
+ --leo-typography-mobile-font-size-secondary-small: 18px;
+ --leo-typography-mobile-line-height-primary-blockquote: 28px;
+ --leo-typography-mobile-line-height-primary-default: 28px;
+ --leo-typography-mobile-line-height-primary-h1: 45px;
+ --leo-typography-mobile-line-height-primary-h2: 40px;
+ --leo-typography-mobile-line-height-primary-h3: 35px;
+ --leo-typography-mobile-line-height-primary-h4: 25px;
+ --leo-typography-mobile-line-height-primary-h5: 20px;
+ --leo-typography-mobile-line-height-primary-hero: 65px;
+ --leo-typography-mobile-line-height-primary-small: 20px;
+ --leo-typography-mobile-line-height-secondary-blockquote: 20px;
+ --leo-typography-mobile-line-height-secondary-default: 18px;
+ --leo-typography-mobile-line-height-secondary-h1: 45px;
+ --leo-typography-mobile-line-height-secondary-h2: 40px;
+ --leo-typography-mobile-line-height-secondary-h3: 30px;
+ --leo-typography-mobile-line-height-secondary-h4: 30px;
+ --leo-typography-mobile-line-height-secondary-h5: 25px;
+ --leo-typography-mobile-line-height-secondary-hero: 50px;
+ --leo-typography-mobile-line-height-secondary-small: 18px;
+ --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-line-height: 22px;
+ --leo-typography-monospace-default-paragraph-indent: 0;
+ --leo-typography-monospace-default-paragraph-spacing: 8px;
+ --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-line-height: 24px;
+ --leo-typography-monospace-large-paragraph-indent: 0;
+ --leo-typography-monospace-large-paragraph-spacing: 8px;
+ --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-line-height: 18px;
+ --leo-typography-monospace-small-paragraph-indent: 0;
+ --leo-typography-monospace-small-paragraph-spacing: 8px;
+ --leo-typography-small-link-font-size: 12px;
+ --leo-typography-small-link-font-weight: 400;
+ --leo-typography-small-link-letter-spacing: -0.08px;
+ --leo-typography-small-link-line-height: 18px;
+ --leo-typography-small-link-paragraph-indent: 0;
+ --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.08px;
+ --leo-typography-small-regular-line-height: 18px;
+ --leo-typography-small-regular-paragraph-indent: 0;
+ --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.08px;
+ --leo-typography-small-semibold-line-height: 18px;
+ --leo-typography-small-semibold-paragraph-indent: 0;
+ --leo-typography-small-semibold-paragraph-spacing: 8px;
+ --leo-typography-x-large-link-font-size: 20px;
+ --leo-typography-x-large-link-font-weight: 400;
+ --leo-typography-x-large-link-letter-spacing: -0.23px;
+ --leo-typography-x-large-link-line-height: 30px;
+ --leo-typography-x-large-link-paragraph-indent: 0;
+ --leo-typography-x-large-link-paragraph-spacing: 8px;
+ --leo-typography-x-large-regular-font-size: 20px;
+ --leo-typography-x-large-regular-font-weight: 400;
+ --leo-typography-x-large-regular-letter-spacing: -0.23px;
+ --leo-typography-x-large-regular-line-height: 30px;
+ --leo-typography-x-large-regular-paragraph-indent: 0;
+ --leo-typography-x-large-regular-paragraph-spacing: 8px;
+ --leo-typography-x-large-semibold-font-size: 20px;
+ --leo-typography-x-large-semibold-font-weight: 600;
+ --leo-typography-x-large-semibold-letter-spacing: -0.23px;
+ --leo-typography-x-large-semibold-line-height: 30px;
+ --leo-typography-x-large-semibold-paragraph-indent: 0;
+ --leo-typography-x-large-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.08px;
+ --leo-typography-x-small-link-line-height: 16px;
+ --leo-typography-x-small-link-paragraph-indent: 0;
+ --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.08px;
+ --leo-typography-x-small-regular-line-height: 16px;
+ --leo-typography-x-small-regular-paragraph-indent: 0;
+ --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.08px;
+ --leo-typography-x-small-semibold-line-height: 16px;
+ --leo-typography-x-small-semibold-paragraph-indent: 0;
+ --leo-typography-x-small-semibold-paragraph-spacing: 8px;
}
@media (prefers-color-scheme: light) {
Variables Diff: variables-news.diff--- ./tokens/css/variables-news.old.css 2026-03-11 20:34:39.851643631 +0000
+++ ./tokens/css/variables-news.css 2026-03-11 20:34:03.630828486 +0000
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:34:03 GMT+0000 (Coordinated Universal Time)
*/
:root {
Variables Diff: variables-newtab.diff--- ./tokens/css/variables-newtab.old.css 2026-03-11 20:34:40.073276662 +0000
+++ ./tokens/css/variables-newtab.css 2026-03-11 20:34:03.639828660 +0000
@@ -1,18 +1,17 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:34:03 GMT+0000 (Coordinated Universal Time)
*/
:root {
- --leo-font-brave-rewards-widget-progress: 400 24px/24px Poppins;
- --leo-font-brave-rewards-widget-token-balance: 400 36px/36px Poppins;
- --leo-font-stats-h2: 400 40px/40px Poppins;
- --leo-font-stats-h3: 500 20px/24px Poppins;
- --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-font-brave-rewards-widget-progress: 400 22px/22px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-brave-rewards-widget-token-balance: 400 36px/36px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-stats-h2: 400 40px/40px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-font-stats-h3: 500 20px/24px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+ --leo-typography-brave-rewards-widget-progress-font-size: 22px;
--leo-typography-brave-rewards-widget-progress-font-weight: 400;
--leo-typography-brave-rewards-widget-progress-letter-spacing: 0;
- --leo-typography-brave-rewards-widget-progress-line-height: 24px;
+ --leo-typography-brave-rewards-widget-progress-line-height: 22px;
--leo-typography-brave-rewards-widget-progress-paragraph-indent: 0;
--leo-typography-brave-rewards-widget-progress-paragraph-spacing: 0;
--leo-typography-brave-rewards-widget-token-balance-font-size: 36px;
Variables Diff: variables-search.diff--- ./tokens/css/variables-search.old.css 2026-03-11 20:34:40.210115080 +0000
+++ ./tokens/css/variables-search.css 2026-03-11 20:34:03.607828039 +0000
@@ -1,63 +1,29 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:34:03 GMT+0000 (Coordinated Universal Time)
*/
:root {
- --leo-font-heading-h5: 600 20px/26px Inter Variable;
- --leo-font-heading-serpresult: 400 18px/26px Inter Variable;
--leo-font-search-snippet-title: 500 18px/26px Inter Variable;
- --leo-font-text-small-bold: 600 13px/21px Inter Variable;
- --leo-font-text-small-link: 600 13px/21px Inter Variable;
- --leo-font-text-small-regular: 400 13px/21px Inter Variable;
--leo-gradient-content-fade-dark: linear-gradient(180deg, rgba(23, 25, 30, 0) 37%, rgb(23, 25, 30) 92%);
--leo-gradient-content-fade-light: linear-gradient(180deg, rgba(255, 255, 255, 0) 37%, rgb(255, 255, 255) 92%);
--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.5px;
- --leo-typography-heading-h5-line-height: 26px;
- --leo-typography-heading-h5-paragraph-indent: 0;
- --leo-typography-heading-h5-paragraph-spacing: 0;
- --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-line-height: 26px;
- --leo-typography-heading-serpresult-paragraph-indent: 0;
- --leo-typography-heading-serpresult-paragraph-spacing: 0;
--leo-typography-search-snippet-title-font-size: 18px;
--leo-typography-search-snippet-title-font-weight: 500;
--leo-typography-search-snippet-title-letter-spacing: 0;
--leo-typography-search-snippet-title-line-height: 26px;
--leo-typography-search-snippet-title-paragraph-indent: 0;
--leo-typography-search-snippet-title-paragraph-spacing: 0;
- --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-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-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;
}
@media (prefers-color-scheme: light) {
:root {
--leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-lowest);
--leo-color-search-background-container: var(--leo-color-schemes-surface-container-lowest);
- --leo-color-search-background-container-interactive: var(--leo-color-primary-10);
--leo-color-search-background-enrichment-cards: var(--leo-color-neutral-5);
--leo-color-search-background-highlight: var(--leo-color-neutral-10);
+ --leo-color-search-background-interactive-normal: var(--leo-color-primary-10);
+ --leo-color-search-background-interactive-pale: var(--leo-color-primary-5);
--leo-color-search-background-landing-page: #eef2f6;
--leo-color-search-background-page: var(--leo-color-schemes-surface-container-lowest);
--leo-color-search-background-search-bar: var(--leo-color-schemes-surface-container-lowest);
@@ -169,9 +135,10 @@
:root {
--leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-highest);
--leo-color-search-background-container: var(--leo-color-schemes-surface-container);
- --leo-color-search-background-container-interactive: var(--leo-color-search-primary-10);
--leo-color-search-background-enrichment-cards: var(--leo-color-neutral-10);
--leo-color-search-background-highlight: var(--leo-color-neutral-20);
+ --leo-color-search-background-interactive-normal: var(--leo-color-primitive-primary-25);
+ --leo-color-search-background-interactive-pale: var(--leo-color-primitive-primary-30);
--leo-color-search-background-landing-page: #1e2028;
--leo-color-search-background-page: var(--leo-color-primitive-neutral-10);
--leo-color-search-background-search-bar: var(--leo-color-schemes-surface-container-highest);
@@ -196,7 +163,7 @@
--leo-color-search-button-pale-background-normal: var(--leo-color-search-primary-10);
--leo-color-search-divider-ask-input-field: var(--leo-color-divider-strong);
--leo-color-search-divider-interactive: rgba(124, 145, 255, 0.3);
- --leo-color-search-divider-strong: var(--leo-color-neutral-50);
+ --leo-color-search-divider-strong: var(--leo-color-neutral-20);
--leo-color-search-divider-subtle: var(--leo-color-primitive-neutral-20);
--leo-color-search-divider-subtle-container: var(--leo-color-neutral-20);
--leo-color-search-fade-semi-transparent: rgba(31, 31, 35, 0.85);
@@ -282,9 +249,10 @@
[data-theme="light"] {
--leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-lowest);
--leo-color-search-background-container: var(--leo-color-schemes-surface-container-lowest);
- --leo-color-search-background-container-interactive: var(--leo-color-primary-10);
--leo-color-search-background-enrichment-cards: var(--leo-color-neutral-5);
--leo-color-search-background-highlight: var(--leo-color-neutral-10);
+ --leo-color-search-background-interactive-normal: var(--leo-color-primary-10);
+ --leo-color-search-background-interactive-pale: var(--leo-color-primary-5);
--leo-color-search-background-landing-page: #eef2f6;
--leo-color-search-background-page: var(--leo-color-schemes-surface-container-lowest);
--leo-color-search-background-search-bar: var(--leo-color-schemes-surface-container-lowest);
@@ -394,9 +362,10 @@
[data-theme="dark"] {
--leo-color-search-background-ask-input-field: var(--leo-color-schemes-surface-container-highest);
--leo-color-search-background-container: var(--leo-color-schemes-surface-container);
- --leo-color-search-background-container-interactive: var(--leo-color-search-primary-10);
--leo-color-search-background-enrichment-cards: var(--leo-color-neutral-10);
--leo-color-search-background-highlight: var(--leo-color-neutral-20);
+ --leo-color-search-background-interactive-normal: var(--leo-color-primitive-primary-25);
+ --leo-color-search-background-interactive-pale: var(--leo-color-primitive-primary-30);
--leo-color-search-background-landing-page: #1e2028;
--leo-color-search-background-page: var(--leo-color-primitive-neutral-10);
--leo-color-search-background-search-bar: var(--leo-color-schemes-surface-container-highest);
@@ -421,7 +390,7 @@
--leo-color-search-button-pale-background-normal: var(--leo-color-search-primary-10);
--leo-color-search-divider-ask-input-field: var(--leo-color-divider-strong);
--leo-color-search-divider-interactive: rgba(124, 145, 255, 0.3);
- --leo-color-search-divider-strong: var(--leo-color-neutral-50);
+ --leo-color-search-divider-strong: var(--leo-color-neutral-20);
--leo-color-search-divider-subtle: var(--leo-color-primitive-neutral-20);
--leo-color-search-divider-subtle-container: var(--leo-color-neutral-20);
--leo-color-search-fade-semi-transparent: rgba(31, 31, 35, 0.85);
Variables Diff: variables-web3.diff--- ./tokens/css/variables-web3.old.css 2026-03-11 20:34:40.403657167 +0000
+++ ./tokens/css/variables-web3.css 2026-03-11 20:34:03.644828757 +0000
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:34:03 GMT+0000 (Coordinated Universal Time)
*/
@media (prefers-color-scheme: light) {
Variables Diff: variables.diff--- ./tokens/css/variables.old.css 2026-03-11 20:34:40.751577901 +0000
+++ ./tokens/css/variables.css 2026-03-11 20:34:03.391823850 +0000
@@ -1,6 +1,6 @@
/**
* Do not edit directly
- * Generated on Tue Mar 10 2026 01:28:50 GMT+0000 (Coordinated Universal Time)
+ * Generated on Wed Mar 11 2026 20:34:03 GMT+0000 (Coordinated Universal Time)
*/
:root {
@@ -338,9 +338,9 @@
--leo-font-large-link: 400 16px/24px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--leo-font-large-regular: 400 16px/24px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--leo-font-large-semibold: 600 16px/24px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
- --leo-font-monospace-default: 400 14px/16.8px SF Mono;
- --leo-font-monospace-large: 400 16px/19.2px SF Mono;
- --leo-font-monospace-small: 400 12px/14.4px SF Mono;
+ --leo-font-monospace-default: 400 14px/16.8px 'SF Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+ --leo-font-monospace-large: 400 16px/19.2px 'SF Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+ --leo-font-monospace-small: 400 12px/14.4px 'SF Mono', ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, Consolas, 'DejaVu Sans Mono', monospace;
--leo-font-small-link: 400 12px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--leo-font-small-regular: 400 12px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
--leo-font-small-semibold: 600 12px/18px system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
Resolves #1332
Summary
#697ee1to#7686ec).marketing.variables.jsonadded for marketing typography variables.browserFontTokens.stories.sveltehad stories referencinglarge/default/small/xSmallfont sub-groups that no longer exist after the token sync. Removed invalid stories and added a null guard inFontTokenSwatchGroup.svelteto preventObject.entries(undefined)crashes.Test plan
npm run storybook)Made with Cursor