The Core Issue: When generating Responsive Text Styles via framer.createTextStyle, there is no way to explicitly label the L (Desktop/1200px) tab in the Editor UI without breaking the internal CSS cascade on the standard Canvas breakpoints.
The Context (How Framer works under the hood): Framer’s text style engine operates strictly top-down (Desktop-First).
The Top-Level properties applied to the createTextStyle object (the "Base" style) natively act as the Desktop breakpoint (e.g., > 1200px).
The breakpoints array handles the downward overrides (e.g., Tablet < 1200, Mobile < 810).
The Problem: Because the Top-Level Base style secretly handles the 1200+ Desktop sizing, the Text Style Editor UI hides the minWidth input for it. Framer then naively assigns the labels L, M, and S sequentially to the explicit breakpoints provided in the array.
This creates an impossible situation for Plugin Developers who want perfectly labeled, correct Breakpoints:
Scenario A: Providing correct CSS logic ([810, 390])
If a plugin developer relies on the Base style to serve Desktop, and only passes the smaller overrides to the array:
javascript
const textStyle = await framer.createTextStyle({
fontSize: 24, // Serves Desktop natively
breakpoints: [
{ minWidth: 810, fontSize: 18 }, // Serves Tablet natively
{ minWidth: 390, fontSize: 16 } // Serves Mobile natively
]
});
Status: Canvas rendering works flawlessly.
The UI Bug: The Framer Editor UI incorrectly labels the first override (810) as the L tab. Users report this as a bug, complaining that "My Desktop breakpoint starts at 810 instead of 1200!"
Scenario B: Forcing correct UI Labels ([1200, 810, 390])
To fix the UI confusion, if a plugin developer explicitly feeds a 1200 breakpoint into the array so that the L tab reads 1200:
javascript
<!-- Failed to upload "chrome_itOxG76pdP.png" -->
<!-- Failed to upload "chrome_pHHNIR7D6C.png" -->
<!-- Failed to upload "chrome_Kv7BWW0n9S.png" -->
Status: The UI tabs look perfect (L=1200, M=810, S=390).
The CSS Cascade Bug: Because the Base already covers Desktop, injecting a 1200 override disrupts the downward cascade. Framer evaluates the 1200 override against the Tablet canvas (< 1200), causing Tablet to fetch Desktop font sizes! It pushes all font values down one slot entirely on the live canvas.
Feature Request: The createTextStyle API needs a way to visually tether the Top-Level Base style to a labeled minWidth (like 1200) inside the Editor UI. Currently, developers must choose between giving users Broken Font Rendering (Scenario B) or confusing UI Labels (Scenario A).
The Core Issue: When generating Responsive Text Styles via framer.createTextStyle, there is no way to explicitly label the L (Desktop/1200px) tab in the Editor UI without breaking the internal CSS cascade on the standard Canvas breakpoints.
The Context (How Framer works under the hood): Framer’s text style engine operates strictly top-down (Desktop-First).
The Top-Level properties applied to the createTextStyle object (the "Base" style) natively act as the Desktop breakpoint (e.g., > 1200px).
The breakpoints array handles the downward overrides (e.g., Tablet < 1200, Mobile < 810).
The Problem: Because the Top-Level Base style secretly handles the 1200+ Desktop sizing, the Text Style Editor UI hides the minWidth input for it. Framer then naively assigns the labels L, M, and S sequentially to the explicit breakpoints provided in the array.
This creates an impossible situation for Plugin Developers who want perfectly labeled, correct Breakpoints:
Scenario A: Providing correct CSS logic ([810, 390])
If a plugin developer relies on the Base style to serve Desktop, and only passes the smaller overrides to the array:
javascript
Status: Canvas rendering works flawlessly.
The UI Bug: The Framer Editor UI incorrectly labels the first override (810) as the L tab. Users report this as a bug, complaining that "My Desktop breakpoint starts at 810 instead of 1200!"
Scenario B: Forcing correct UI Labels ([1200, 810, 390])
To fix the UI confusion, if a plugin developer explicitly feeds a 1200 breakpoint into the array so that the L tab reads 1200:
javascript
Status: The UI tabs look perfect (L=1200, M=810, S=390).
The CSS Cascade Bug: Because the Base already covers Desktop, injecting a 1200 override disrupts the downward cascade. Framer evaluates the 1200 override against the Tablet canvas (< 1200), causing Tablet to fetch Desktop font sizes! It pushes all font values down one slot entirely on the live canvas.
Feature Request: The createTextStyle API needs a way to visually tether the Top-Level Base style to a labeled minWidth (like 1200) inside the Editor UI. Currently, developers must choose between giving users Broken Font Rendering (Scenario B) or confusing UI Labels (Scenario A).