feat: component theming #1791

agurtovoy · 2024-12-20T07:33:30Z

What/Why?

Visually editable site and component themes

Testing

Kapture.2024-12-23.at.19.10.53.mp4

linear · 2024-12-20T07:33:33Z

VIB-1043 Component theming

changeset-bot · 2024-12-20T07:33:34Z

⚠️ No Changeset found

Latest commit: 5d71056

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

vercel · 2024-12-20T07:33:36Z

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
catalyst-latest	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 24, 2024 6:11am
catalyst-soul	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Dec 24, 2024 6:11am

3 Skipped Deployments

Name	Status	Preview	Updated (UTC)
catalyst	⬜️ Ignored (Inspect)		Dec 24, 2024 6:11am
catalyst-au	⬜️ Ignored (Inspect)	Visit Preview	Dec 24, 2024 6:11am
catalyst-uk	⬜️ Ignored (Inspect)	Visit Preview	Dec 24, 2024 6:11am

agurtovoy · 2024-12-24T01:41:51Z

core/app/[locale]/(default)/layout.tsx

@@ -16,15 +14,13 @@ export default async function DefaultLayout({ params, children }: Props) {
  setRequestLocale(locale);

  return (
-    <MakeswiftProvider previewMode={(await draftMode()).isEnabled}>


Moved <MakeswiftProvider> to the root root layout so that theming can be applied to all pages.

agurtovoy · 2024-12-24T02:45:05Z

core/app/[locale]/layout.tsx

+          <VercelComponents />
+        </body>
+      </html>
+    </MakeswiftProvider>


Toggle the "Hide whitespace" setting to view the semantic diffs here:

agurtovoy · 2024-12-24T02:49:11Z

core/lib/makeswift/components/site-theme/register.ts

+      label: 'Sections',
+      type: sections,
+    }),
+  },


Full site theme panel:

agurtovoy · 2024-12-24T02:59:27Z

core/lib/makeswift/components/site-theme/primitives/accordion.ts

+    titleFont: Font({ label: 'Title font', variant: false }),
+    contentFont: Font({ label: 'Content font', variant: false }),
+    light: colorGroup('Light'),
+    dark: colorGroup('Dark'),


agurtovoy · 2024-12-24T03:00:13Z

core/lib/makeswift/components/site-theme/primitives/banner.ts

+    background: Color({ label: 'Background' }),
+    text: Color({ label: 'Text' }),
+    focus: Color({ label: 'Focus' }),
+    close: closeButton,


agurtovoy · 2024-12-24T03:06:10Z

core/lib/makeswift/components/site-theme/primitives/button.ts

+    tertiary: colorGroup('Tertiary'),
+    ghost: colorGroup('Ghost'),
+    focus: Color({ label: 'Focus' }),
+  },


agurtovoy · 2024-12-24T03:07:56Z

core/lib/makeswift/components/site-theme/primitives/card.ts

+    borderRadius: Number({ label: 'Border radius (px)', defaultValue: 16 }),
+    focus: Color({ label: 'Focus' }),
+    light: colorGroup('Light'),
+    dark: colorGroup('Dark'),


agurtovoy · 2024-12-24T03:11:43Z

core/lib/makeswift/components/site-theme/primitives/carousel.ts

+  type: {
+    focus: Color({ label: 'Focus' }),
+    light: colorGroup('Light'),
+    dark: colorGroup('Dark'),


agurtovoy · 2024-12-24T03:13:32Z

core/lib/makeswift/components/site-theme/primitives/logo.ts

+    font: Font({ label: 'Font', variant: false }),
+    text: Color({ label: 'Text' }),
+    focus: Color({ label: 'Focus' }),
+  },


agurtovoy · 2024-12-24T03:16:13Z

core/lib/makeswift/components/site-theme/primitives/nav.ts

+    searchResult: searchResultGroup('Search result'),
+    cartCount: cartCountGroup('Cart count'),
+    locale: localeGroup('Locale'),
+  },


agurtovoy · 2024-12-24T03:17:09Z

core/lib/makeswift/components/site-theme/primitives/price-label.ts

+  layout: Shape.Layout.Popover,
+  type: {
+    light: colorGroup('Light'),
+    dark: colorGroup('Dark'),


agurtovoy · 2024-12-24T03:32:57Z

core/lib/makeswift/components/site-theme/primitives/product-card.ts

+    focus: Color({ label: 'Focus' }),
+    light: colorGroup('Light'),
+    dark: colorGroup('Dark'),
+  },


agurtovoy · 2024-12-24T03:34:20Z

core/lib/makeswift/components/site-theme/sections/footer.ts

+    footerLinkHover: Color({ label: 'Footer link hover' }),
+    footerCopyright: Color({ label: 'Footer copyright' }),
+    focus: Color({ label: 'Focus' }),
+  },


agurtovoy · 2024-12-24T03:35:25Z

core/lib/makeswift/components/site-theme/sections/slide-show.ts

+    playBorder: Color({ label: 'Play border' }),
+    playBorderHover: Color({ label: 'Play border hover' }),
+    playText: Color({ label: 'Play text' }),
+    focus: Color({ label: 'Focus' }),


agurtovoy · 2024-12-24T03:36:01Z

core/package.json

@@ -17,7 +17,7 @@
    "@conform-to/react": "^1.2.2",
    "@conform-to/zod": "^1.2.2",
    "@icons-pack/react-simple-icons": "^10.2.0",
-    "@makeswift/runtime": "0.0.0-snapshot-20241217195602",
+    "@makeswift/runtime": "0.0.0-snapshot-20241220223738",


New runtime snapshot w/ Shape v2 support.

agurtovoy · 2024-12-24T04:29:13Z

core/lib/makeswift/components/site-theme/layouts/section.ts

+  label: 'Section',
+  layout: Shape.Layout.Popover,
+  type: {
+    maxWidth: widthGroup('Max width'),


agurtovoy · 2024-12-24T06:11:26Z

core/lib/makeswift/component.tsx

+export const Component = async ({
+  snapshotId,
+  ...props
+}: {


Userland RSC for MakeswiftComponent

github-actions · 2024-12-24T06:12:47Z

⚡️🏠 Lighthouse report

Lighthouse ran against https://catalyst-latest-qd5n7nxvo-bigcommerce-platform.vercel.app

🖥️ Desktop

We ran Lighthouse against the changes on a desktop and produced this report. Here's the summary:

Category	Score
🟢 Performance	97
🟢 Accessibility	94
🟢 Best practices	100
🟠 SEO	82

📱 Mobile

We ran Lighthouse against the changes on a mobile and produced this report. Here's the summary:

Category	Score
🟠 Performance	82
🟢 Accessibility	94
🟢 Best practices	100
🟠 SEO	85

vercel bot had a problem deploying to Preview – catalyst-latest December 20, 2024 07:34 Failure

vercel bot had a problem deploying to Preview – catalyst-soul December 20, 2024 07:34 Failure

agurtovoy force-pushed the aleksey/vib-1043-component-theming branch from 2bb617f to ab7bc1a Compare December 23, 2024 02:52

vercel bot had a problem deploying to Preview – catalyst-latest December 23, 2024 02:54 Failure

vercel bot had a problem deploying to Preview – catalyst-soul December 23, 2024 02:54 Failure

agurtovoy force-pushed the aleksey/vib-1043-component-theming branch 2 times, most recently from 682d4d2 to 5b45156 Compare December 23, 2024 22:59

vercel bot had a problem deploying to Preview – catalyst-latest December 23, 2024 23:01 Failure

vercel bot had a problem deploying to Preview – catalyst-soul December 23, 2024 23:02 Failure

agurtovoy force-pushed the aleksey/vib-1043-component-theming branch from 5b45156 to 4b7d2bc Compare December 24, 2024 00:49

vercel bot deployed to Preview – catalyst-latest December 24, 2024 00:51 View deployment

vercel bot deployed to Preview – catalyst-soul December 24, 2024 00:51 View deployment

agurtovoy force-pushed the aleksey/vib-1043-component-theming branch from 4b7d2bc to a1adf36 Compare December 24, 2024 01:08

vercel bot deployed to Preview – catalyst-latest December 24, 2024 01:10 View deployment

vercel bot deployed to Preview – catalyst-soul December 24, 2024 01:10 View deployment

agurtovoy marked this pull request as ready for review December 24, 2024 01:40

agurtovoy requested a review from a team as a code owner December 24, 2024 01:40

agurtovoy commented Dec 24, 2024

View reviewed changes

agurtovoy requested review from migueloller and apledger December 24, 2024 02:46

agurtovoy commented Dec 24, 2024

View reviewed changes

core/lib/makeswift/components/site-theme/register.ts

label: 'Sections',

type: sections,

}),

},

Copy link

Author

agurtovoy Dec 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Full site theme panel:

agurtovoy commented Dec 24, 2024

View reviewed changes

agurtovoy force-pushed the aleksey/vib-1043-component-theming branch from a1adf36 to 02add2f Compare December 24, 2024 03:11

agurtovoy commented Dec 24, 2024

View reviewed changes

vercel bot deployed to Preview – catalyst-latest December 24, 2024 03:12 View deployment

vercel bot deployed to Preview – catalyst-soul December 24, 2024 03:12 View deployment

agurtovoy commented Dec 24, 2024

View reviewed changes

agurtovoy force-pushed the aleksey/vib-1043-component-theming branch from 02add2f to ea30743 Compare December 24, 2024 04:26

vercel bot deployed to Preview – catalyst-latest December 24, 2024 04:27 View deployment

agurtovoy commented Dec 24, 2024

View reviewed changes

vercel bot deployed to Preview – catalyst-soul December 24, 2024 04:30 View deployment

migueloller force-pushed the soul/integrations/makeswift branch from 434647d to 5ef9a8c Compare December 24, 2024 05:32

feat: component theming

5d71056

agurtovoy force-pushed the aleksey/vib-1043-component-theming branch from ea30743 to 5d71056 Compare December 24, 2024 06:09

vercel bot deployed to Preview – catalyst-latest December 24, 2024 06:10 View deployment

vercel bot deployed to Preview – catalyst-soul December 24, 2024 06:11 View deployment

agurtovoy commented Dec 24, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat: component theming #1791

feat: component theming #1791

agurtovoy commented Dec 20, 2024 •

edited

Loading

linear bot commented Dec 20, 2024

changeset-bot bot commented Dec 20, 2024 •

edited

Loading

vercel bot commented Dec 20, 2024 •

edited

Loading

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024 •

edited

Loading

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024 •

edited

Loading

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

agurtovoy Dec 24, 2024

github-actions bot commented Dec 24, 2024

feat: component theming #1791

Are you sure you want to change the base?

feat: component theming #1791

Conversation

agurtovoy commented Dec 20, 2024 • edited Loading

What/Why?

Testing

linear bot commented Dec 20, 2024

changeset-bot bot commented Dec 20, 2024 • edited Loading

⚠️ No Changeset found

vercel bot commented Dec 20, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

agurtovoy Dec 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

agurtovoy Dec 24, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Dec 24, 2024

⚡️🏠 Lighthouse report

🖥️ Desktop

📱 Mobile

agurtovoy commented Dec 20, 2024 •

edited

Loading

changeset-bot bot commented Dec 20, 2024 •

edited

Loading

vercel bot commented Dec 20, 2024 •

edited

Loading

agurtovoy Dec 24, 2024 •

edited

Loading

agurtovoy Dec 24, 2024 •

edited

Loading