Uh oh!
There was an error while loading. Please reload this page.
feat(ui-scripts,ui-themes): generate theme tokens as css custom properties - #2690
feat(ui-scripts,ui-themes): generate theme tokens as css custom properties#2690HerrTopi wants to merge 1 commit into
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 (2)badge-canvas.png — 1573 pixels differtooltip-light.png — 14438 pixels differBaselines come from the |
There was a problem hiding this comment.
While the CSS is exported, the users can only pull it in with an export statement from the src folder, which is not nice.
When I import it this way:import "@instructure/ui-themes/src/themes/newThemeTokens/themesAsCSSVariables/cssThemesWithMediaQueries.css"
I get an error TS2882: Cannot find module or type declarations for side-effect import of @instructure/ui-themes/src/themes/newThemeTokens/themesAsCSSVariables/cssThemesWithMediaQueries.css
Can you please look into this? First I think we should add it to the exports in the package.json, then AI recommended me to add also a d.ts file.
I've released version 11.7.5-pr-snapshot-1787571141446 from this PR, so its easier to test
| (res, key) => `${res}--${key}:${flatResult[key]};`, | ||
| '' | ||
| ) | ||
| sharedTokensByThemes[theme] = cssVariables |
There was a problem hiding this comment.
This makes a CSS class called light/dark/legacyCanvas/legacyCanvasHighContrast. Arent the light and dark keywords too generic that it could cause hard to track down bugs because something overrides it? I'd prefix these with something like InstUITheme-{name}
HouseOfHawks
commented
Aug 24, 2026
Agreed! If we can truncate to a simple Outside of that, testing a Next.js app router with that import in  And light mode is correctly overridden:  Great stuff! |
…rties Add a buildCSSVariables step to build-themes that flattens each theme's shared tokens and emits one stylesheet per theme under src/themes/newThemeTokens/themesAsCSSVariables/, plus a cssThemesWithMediaQueries.css that maps the light and dark themes to prefers-color-scheme. Register the malva plugin in dprint.json so the generated stylesheets are formatted by the existing dprint pass, and mark *.css as side-effectful in ui-themes so bundlers do not drop the stylesheet imports. Also emit SharedTokens as a type-only import in the generated component templates. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Summary
buildCSSVariablesstep tobuild-themesthat flattens each theme's shared tokens and emits one stylesheet per theme undersrc/themes/newThemeTokens/themesAsCSSVariables/.cssThemesWithMediaQueries.css, mapping the light and dark themes toprefers-color-scheme.dprint.jsonso the generated stylesheets go through the existing dprint pass.*.cssas side-effectful inui-themesso bundlers don't tree-shake stylesheet imports.Test Plan
pnpm run build:themesand check the 5 files underpackages/ui-themes/src/themes/newThemeTokens/themesAsCSSVariables/— the directory is gitignored, so none of the generated CSS appears in this diff.cssThemesWithMediaQueries.cssloaded, toggle the OS colour scheme and confirm the:rootvalues andcolor-schemeswitch.Open questions for the reviewer
--background-*,--spacing-md). The existing style-dictionary emitter usesinstui-<theme>. Adding a prefix later is breaking, so this should be settled before release.Fixes INSTUI-5153
🤖 Generated with Claude Code