Add CSS token migration plan for future UI framework swap#503
Draft
Copilot wants to merge 10 commits into
Draft
Conversation
Components added: - Text, BigStat, Image, Empty (display) - Brand, TitledSection, Hero, HeroImage (layout) - ShareLink, ShareButton, ShareCode, CouponCode, ReferralCodes (sharing) - InputField, CheckboxField, DropdownField, PasswordField, NameFields, RadioCard (forms) - NavigationSidebar, NavigationSidebarItem, Tabs, Tab, Router, Route, NavigationMenu (navigation)
…onents Components added: - DividedLayout, StatContainer, LinkButton, Pagination, PopupContainer, Scroll, CloseButton, FormMessage (utility) - PortalContainer, PortalLogin, PortalRegister, PortalForgotPassword, PortalResetPassword, PortalChangePassword, PortalProfile, PortalFooter, PortalFrame (portal) - Leaderboard, LeaderboardRank, TaskCard, Timeline, TimelineEntry, ProgramExplainer, ProgramExplainerStep (game/stats) - UserName, QRCode, ReferralCard, ReferralIframe, RewardExchangeList, HeaderLogo, TextSpan, ProgramMenu, LogoutCurrentUser (misc) - ReferralTable, RewardsTable, InvoiceTable, TableCell, TableRow, PayoutButtonScroll (tables) - PortalEmailVerification, PortalVerifyEmail, PortalRegistrationForm, PortalChangeMarketing, PortalLogout, PortalProtectedRoute, PortalGoogleLogin, MarketingEmailsCheckbox, ContextRouter, GraphQLClientProvider (complex auth)
…for hooks - Migrate verification/lead components (WidgetVerification, CodeVerification, EmailVerification, LeadForm, EditProfile, InstantAccessRegistration, ReferredRegistration) - Migrate tax-and-cash components (TaxAndCash, TaxAndCashDashboard, BankingInfoForm, PayoutDetailsCard, PayoutStatusAlert, UserInfoForm, IndirectTaxForm, DocusignForm) - Migrate remaining components (CardFeed, BaseRegistration, GoogleSignIn, PortalGoogleRegistrationForm) - Add vitest unit tests for 11 component hooks - All 94 components now migrated with stories and Chromatic readiness
- Added msw dependency and test script to package.json - Added unit test project configuration to vite.config.ts - Created 54 new test files covering all hooks (excluding demo hooks) - Tests cover: initial state, form validation, event dispatch, GraphQL query handling, pagination, and interaction flows - All 65 test files pass with 244 tests total
…ponents Update the ShareLink GraphQL query to pass engagementMedium and shareMedium parameters, matching the updated mint-components behavior after the master merge.
Copilot created this pull request from a session on behalf of
Sam Beveridge (00salmon)
May 25, 2026 23:17
View session
Sam Beveridge (00salmon)
changed the title
…mponents Add useDemo* hooks with static/mock data and isDemo() ternary branching to 47 lit-components, mirroring the mint-components demo pattern for sandbox environments. Components covered include: - Copy-text: ShareLink, ShareCode, CouponCode, ReferralCode, ReferralCodes - Data display: UserName, QRCode, ReferralIframe, ShareButton, TaskCard - Tables: ReferralTable, RewardsTable, InvoiceTable, RewardExchangeList - Portal/Auth: PortalLogin, PortalProfile, EditProfile, PortalRegister, PortalRegistrationForm, PortalGoogleRegistrationForm, PortalLogout, PortalProtectedRoute, PortalChangeMarketing, PortalChangePassword, PortalForgotPassword, PortalResetPassword, PortalEmailVerification, PortalVerifyEmail - Tax/Payout: TaxAndCash, TaxAndCashDashboard, BankingInfoForm, DocusignForm, IndirectTaxForm, UserInfoForm, PayoutButtonScroll, PayoutDetailsCard, PayoutStatusAlert - Navigation: NavigationMenu, NavigationSidebarItem, Pagination, ContextRouter, ProgramMenu - Forms: CheckboxField, DropdownField, InputField, NameFields, PasswordField - Other: GoogleSignIn, InstantAccessRegistration, LogoutCurrentUser, LeadForm, WidgetVerification
Copilot
AI
changed the title
Co-pilot mint -> lit migration
feat(lit-components): add demo hooks and isDemo() branching to all components
May 26, 2026
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot
AI
changed the title
feat(lit-components): add demo hooks and isDemo() branching to all components
Introduce framework-agnostic UI adapter layer for lit-components
May 26, 2026
Copilot stopped work on behalf of
Sam Beveridge (00salmon) due to an error
May 26, 2026 23:44
Copilot
AI
changed the title
Introduce framework-agnostic UI adapter layer for lit-components
Add CSS token migration plan for future UI framework swap
May 26, 2026
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
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.
Capture the plan for decoupling
lit-componentsfrom Shoelace's--sl-*CSS custom properties so a future UI framework swap is a one-file mapping change rather than a sweep of every view.Context
Views and stories reference Shoelace tokens directly (
var(--sl-spacing-medium),var(--sl-color-neutral-200), etc.) — ~396 occurrences across ~90 files, drawing from 64 unique tokens. The markup side is already abstracted behindsrc/ui/registry.ts+UIComponents; the CSS side is not.Plan summary (
packages/lit-components/CSS_TOKEN_MIGRATION_PLAN.md)--sq-*namespace owned by this package insrc/ui/tokens/tokens.css— names express intent, not Shoelace internals.src/ui/<framework>/tokens.css(e.g.--sq-spacing-md: var(--sl-spacing-medium);), imported from the adapter'sbootstrap.ts.var(--sl-*)→var(--sq-*)acrosssrc/components/**(views + stories).src/ui/shoelace/index.tskeeps--sl-*since it is the adapter.<sl-*>markup in views" convention.src/ui/<new>/{index.ts,tokens.css,bootstrap.ts}+ change three lines insrc/index.ts; zero edits undersrc/components/**.Plan also includes a fresh-inventory command, full token breakdown by family, risk register, and rough effort sketch.