Conversation
|
Visual regression reportCypress suite: ✅ Passing Visual diff:
Accessibility (axe): ✅ No violations. 📊 View full report — click a screenshot's ⚠ badge to see each violation boxed on the image, with the offending element named and contrast failures shown as color swatches. Diff images (3)badge-canvas.png — 1573 pixels differtooltip-dark.png — 881 pixels differtooltip-light.png — 956 pixels differBaselines come from the |
bd1d01a to
f8b9b51
Compare
HerrTopi
changed the title
b9a0642 to
29c4c87
Compare
matyasf
left a comment
matyasf
left a comment
There was a problem hiding this comment.
- for theme lookup
theme.keyis used inwithStyleNewanduseStyleNew, but this writescanvasHighContrast, when it needscanvas-high-contrast
See my other comments
| components: { [componentId]: frozenTheme[themeKey].component } | ||
| } | ||
| } | ||
| : themeInContext |
There was a problem hiding this comment.
I would throw an error if useTokensFrom is used with frozenTheme, so we dont accidentally use it when its not implemented
| ...frozenTheme[themeKey], | ||
| components: { [componentId]: frozenTheme[themeKey].component } | ||
| } | ||
| } |
There was a problem hiding this comment.
I would throw an error if useTokensFrom is used with frozenTheme, so we dont accidentally use it when its not implemented
| * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
| * SOFTWARE. | ||
| */ | ||
| import promptThemeInput from './promptThemeInput.ts' |
There was a problem hiding this comment.
I think this should be merged to this file, we're not extracting code in other commands either
|
|
||
| const buildFrozenThemes = async (data: any) => { | ||
| for (let i = 0; i < data.themes.length; i++) { | ||
| const frozen = await resolveUsedThemeElements( |
There was a problem hiding this comment.
As I see this code only extracts the top component from a multi-component package, isnt this an issue? e.g. I extracted Menu, and it failed to add semantic.color.background.interactive.action.tertiary.hover from MenuItem
| version, | ||
| 'styles.ts' | ||
| ), | ||
| 2 |
There was a problem hiding this comment.
this is just called with "2", lets not make it a parameter
| (ts.isArrowFunction(node) || ts.isFunctionDeclaration(node)) && | ||
| node.parameters.length > paramIndex | ||
| ) { | ||
| param = node.parameters[paramIndex] |
There was a problem hiding this comment.
As I see this finds the first function with >2 parameters. it should find the default export, now it craches e.g. in FormFieldLayout
| } | ||
| } | ||
|
|
||
| const extractPaths = (filePath: string, paramIndex: number) => { |
There was a problem hiding this comment.
This fails to extract symbols from View's helper functions like getBorderStyle, getSpacingStyle`` getOffsetStyle`
…onent version Add a prompt-driven generator that snapshots only the theme tokens one component version reads, so an older version keeps its tokens as the shared trees keep evolving. `pnpm run build:frozen-themes` asks for themes, package, component and version, then writes a frozenThemes folder into that component version. The package and component lists only offer components that are versioned, have a styles.ts, and are not frozen yet. Narrowing runs in three passes: call the component token function against a recording proxy, trace the sharedTokens parameter of generateStyle through the TypeScript AST, then map those shared tokens back to the semantics they read. The union drives what semantics and primitives keep. Emitted files are sliced out of the original source, so token references survive as written. For Alert v2 the semantics file comes out at 82 lines against more than 1600. Reads that cannot be resolved at build time, such as indexing tokens with a runtime value, throw rather than being treated as unused, which would strip tokens the component needs. withStyleNew now nests a frozen theme's component function under components[componentId] so the existing lookup path resolves it. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
2 participants
INSTUI-5188
Adds a generator that freezes theme tokens for one component version, so an older
version keeps rendering the same way while the shared
semanticsandsharedTokenstrees keep changing.Run
pnpm run build:frozen-themes. It prompts for the themes, package, component,and version, then writes a
frozenThemesfolder into that component version.Each file is narrowed to what the component actually reads — for Alert v2 that's
82 lines of semantics instead of 1600+.
What's in here.
ui-scripts: thebuild-frozen-themescommand, the prompt, and the extractionitself — a recording proxy for the component's own token reads, plus a
TypeScript AST pass for the
sharedTokensreads instyles.ts.emotion:useStyleNewandwithStyleNewmap a frozen theme'scomponentonto
newTheme.components[componentId], so a frozen component resolves its owntokens.
ui-avatar,ui-badge: wire Avatar v2 and Badge v2 to their frozen themes.docs/contributing/frozen-themes.md.Reads that can't be resolved at build time, such as
sharedTokens[variant], throwwith the file, line, and column rather than silently dropping tokens.
Note: seTokensFrom is not handled currently.