Inline shared UI tokens into the synced theme stylesheet - #70
Merged
Merged
Conversation
mdbase-connect #508 moved the theme tokens out of packages/ui/styles.css into the @mdbase-dev/ui package, leaving bare @import specifiers at the top of the file. sync-sources copied those imports verbatim into public/mdbase-theme.css, where browsers cannot resolve them, so every colour, border and control token on the deployed site went undefined. Resolve the imports while syncing: inline tokens.css, drop brand.css and controls.css (app component styles the site does not use, and brand.css would restyle the site's .wordmark), and fail the sync on any other or leftover @import. Refresh the committed theme files from Connect beta120.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Since the Connect ref was bumped to beta120 in #68, the deployed
mdbase-theme.cssstarts with:mdbase-connect#508 moved the tokens into the
@mdbase-dev/uipackage, andsync-sources.mjscopies the head ofpackages/ui/styles.cssverbatim. Browsers can't resolve bare specifiers, so every--color-*token is undefined on mdbase.dev. As a result the header rules are gone, the page background is unset, and the theme toggle does nothing visible.Fix
resolveConnectThemeImportsinscripts/sync-sources.mjs:packages/app-ui/css/tokens.cssbrand.cssandcontrols.css, which are app component styles; the pre-#508 extract never included them, andbrand.csswould override the site's.wordmark@import, so a future upstream change fails the deploy instead of shipping broken CSSThe committed
public/mdbase-theme.cssandpublic/theme-bootstrap.jsare refreshed from the pinned beta120 ref.Verification
sync:sourcesagainst worktrees at the refs insite-sources.json: no@importin the output, and every custom property the old theme defined is still defined.pnpm build, then Playwright on the preview: header borders are 1px in both colour schemes, the body background and ink resolve, and the theme toggle switches, persists across a reload and switches back.The palette now follows Connect's new oklch tokens, so colours differ slightly from before #508.