UI update #626

Copilot · 2026-04-16T12:29:11Z

This plugin now pins framer-plugin to a pkg.pr.new tarball URL. If this is meant to ship, it’s safer to depend on a published npm version (or an internal registry) to avoid relying on an external preview service and to keep dependency management consistent across the repo.

Suggested change

"framer-plugin": "https://pkg.pr.new/framer/FramerStudio/framer-plugin@02bced9.tgz",

"framer-plugin": "1.0.0",

yes will change when ready

madebyisaacr · 2026-04-17T05:50:21Z

If you're going to remove the custom button colors in Dither then remove it from ASCII too, because it has the same button style.

madebyisaacr · 2026-04-17T05:53:33Z

CSV import also has a collection icon. Consider updating it there too.

Copilot · 2026-04-16T12:29:12Z

Removing the tile utility class here drops the background/hover styling defined in globals.css (@utility tile). If these buttons are still intended to look like tiles (as in other HubSpot UI elements), consider keeping tile or replacing it with an equivalent new utility so the menu options remain visually clickable.

-Original file line number
+Diff line change
@@ Expand Up / @@ -75,7 +75,7 @@ export function App() { @@
                         <div className="flex | justify-between items-center | w-full">
                             <p>New script version available</p>
                             <button
-                                className="framer-button-primary bg-[var(--framer-color-tint-dimmed)] text-[var(--framer-color-tint)] hover:bg-[var(--framer-color-tint-dimmed)] focus:bg-[var(--framer-color-tint-dimmed)] | rounded-[6px] | text-[10px] font-500 | w-[46px] h-[20px]"
+                                className="framer-button-primary | rounded-[6px] | text-[10px] font-500 | w-[46px] h-[20px]"
                                 onClick={toggleScript.bind(null, true)}
                             >
                                 Update
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,7 @@ @@
             "check-vitest": "vitest run"
         },
         "dependencies": {
-            "framer-plugin": "^3.10.3",
+            "framer-plugin": "https://pkg.pr.new/framer/FramerStudio/framer-plugin@02bced9.tgz",
             "marked": "^17.0.1",
             "react": "^18.3.1",
             "react-dom": "^18.3.1",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -49,7 +49,7 @@ select:not(:disabled) { @@
         justify-content: center;
         width: 100%;
         min-height: 200px;
-        background-color: var(--framer-color-bg-secondary);
+        background-color: var(--framer-color-bg-tertiary);
         border-radius: 10px;
     }
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -15,7 +15,7 @@ @@
         },
         "dependencies": {
             "clsx": "^2.1.1",
-            "framer-plugin": "^3.6.0",
+            "framer-plugin": "https://pkg.pr.new/framer/FramerStudio/framer-plugin@02bced9.tgz",
             "ogl": "^1.0.11",
             "react": "^18.3.1",
             "react-dom": "^18.3.1",
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -14,7 +14,7 @@ @@
             "check-vitest": "run g:check-vitest"
         },
         "dependencies": {
-            "framer-plugin": "^3.6.0",
+            "framer-plugin": "https://pkg.pr.new/framer/FramerStudio/framer-plugin@02bced9.tgz",
             "react": "^18.3.1",
             "react-dom": "^18.3.1",
             "valibot": "^1.2.0"
@@ Expand Down @@

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UI update #626

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Copilot AI Apr 16, 2026

Uh oh!

huntercaron Apr 16, 2026

Uh oh!

GitHub Actions / eslint

madebyisaacr Apr 17, 2026

Uh oh!

GitHub Actions / typescript

GitHub Actions / typescript

GitHub Actions / typescript

madebyisaacr Apr 17, 2026

Uh oh!

Copilot AI Apr 16, 2026

Uh oh!

huntercaron Apr 16, 2026

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

-Original file line number
+Diff line change
@@ Expand Up / @@ -14,6 +14,7 @@ main { @@
         --framer-color-tint: #493fac;
         --framer-color-tint-dark: #493fac;
         --framer-color-tint-extra-dark: #493fac;
+        --framer-color-tint-dimmed: rgba(73, 63, 172, 0.12);
     }
     form {
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -21,21 +21,6 @@ main::after { @@
         pointer-events: none;
     }
-    button {
-        border-radius: 8px;
-        border: none;
-        height: 30px;
-        padding: 0 15px;
-        font-size: 1em;
-        font-weight: 600;
-        font-family: inherit;
-        background-color: var(--framer-color-bg-secondary);
-        color: var(--framer-color-text);
-        cursor: pointer;
-        outline: none;
-        user-select: none;
-    }
     .interface {
         display: flex;
         width: 100%;
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -49,7 +49,7 @@ @@
                     }
                 }
             }
         }, [selection])
         const handleOnClick = useCallback(async (node: CanvasNode, color: string) => {
             if (!color) return
@@ Expand Down Expand Up / @@ -114,8 +114,8 @@ @@
                     <>
                         <div className="interface">{colorList}</div>
                         <button
+                            className="framer-button-secondary"
                             disabled={!supportsGradient || !isAllowedToSetAttributes}
-                            style={{ opacity: supportsGradient ? 1 : 0.5 }}
                             onClick={() => {
                                 if (!currentSelection) return
                                 void setAsGradient(currentSelection, colors)
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -238,21 +238,8 @@ body[data-framer-theme="dark"] .error-container { @@
         user-select: none;
     }
-    .framer-button-primary {
-        --framer-color-text-reversed: #000;
-        background-color: #fff !important;
-    }
-    body[data-framer-theme="light"] {
-        .framer-button-primary {
-            --framer-color-text-reversed: #fff;
-            background-color: #000 !important;
-        }
-    }
     .upload-cta {
         width: 100%;
-        background: var(--framer-color-bg-tertiary);
     }
     .asset-buttons {
@@ Expand Down @@

-Original file line number
+Diff line change
@@ -1,5 +1,5 @@
     import cn from "clsx"
-    import { framer, ImageAsset, useIsAllowedTo } from "framer-plugin"
+    import { framer, type ImageAsset, useIsAllowedTo } from "framer-plugin"
     import { Camera, Mesh, Plane, Renderer, Transform } from "ogl"
     import { useCallback, useEffect, useRef, useState } from "react"
     import "./App.css"
@@ Expand Down Expand Up / @@ -160,7 +160,7 @@ @@
                     if (framer.mode === "canvas") {
                         await framer.addImage({
                             image: {
                                 bytes: bytes,
                                 mimeType: "image/png",
                             },
                             preferredImageRendering: "pixelated",
@@ Expand All / @@ -168,7 +168,7 @@ @@
                     } else {
                         await framer.setImage({
                             image: {
                                 bytes: bytes,
                                 mimeType: "image/png",
                             },
                             preferredImageRendering: "pixelated",
@@ Expand All / @@ -181,7 +181,7 @@ @@
                     await framer.setImage({
                         image: {
                             bytes,
                             mimeType: originalImage.mimeType,
                         },
                         preferredImageRendering: "pixelated",
@@ Expand Down Expand Up / @@ -354,6 +354,7 @@ @@
                     />
                     {droppedAsset && (
                         <button
+                            className="framer-button-secondary"
                             onClick={() => {
                                 setDroppedAsset(null)
                             }}
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -50,7 +50,7 @@ export const Upload = forwardRef(function Upload( @@
                         <button
                             ref={buttonRef}
                             type="button"
-                            className="upload-cta"
+                            className="framer-button-secondary upload-cta"
                             disabled={!isAllowed}
                             title={getPermissionTitle(isAllowed)}
                         >
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -2,12 +2,28 @@ import type { SVGProps } from "react" @@
     export function IconCollection(props: SVGProps<SVGSVGElement>) {
         return (
-            <svg xmlns="http://www.w3.org/2000/svg" width={9} height={11.1} fill="none" overflow="visible" {...props}>
-                <g fill="currentColor">
-                    <path d="M4.5 0C7 0 9 1 9 2.3c0 1.3-2 2.3-4.5 2.3S0 3.6 0 2.3C0 1 2 0 4.5 0z" />
-                    <path d="M9 5.3c0 1.3-2 2.3-4.5 2.3S0 6.6 0 5.3V3.5c0 1.2 2 2.3 4.5 2.3S9 4.8 9 3.5z" />
-                    <path d="M9 8.8c0 1.3-2 2.3-4.5 2.3S0 10.1 0 8.8V7.1c0 1 2 2.2 4.5 2.2S9 8.3 9 7z" />
-                </g>
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={12}
+                height={12}
+                viewBox="0 0 12 12"
+                fill="none"
+                role="presentation"
+                aria-hidden="true"
+                {...props}
+            >
+                <path
+                    d="M 6 0.5 C 8.761 0.5 11 1.619 11 3 C 11 4.381 8.761 5.5 6 5.5 C 3.239 5.5 1 4.381 1 3 C 1 1.619 3.239 0.5 6 0.5 Z"
+                    fill="currentColor"
+                />
+                <path
+                    d="M 11 6 C 11 7.381 8.761 8.5 6 8.5 C 3.239 8.5 1 7.381 1 6 C 1 5.711 1.098 5.433 1.278 5.175 C 2.377 5.991 4.084 6.515 6 6.515 C 7.916 6.515 9.623 5.991 10.722 5.175 C 10.902 5.433 11 5.711 11 6 Z"
+                    fill="currentColor"
+                />
+                <path
+                    d="M 11 9 C 11 10.381 8.761 11.5 6 11.5 C 3.239 11.5 1 10.381 1 9 C 1 8.711 1.098 8.433 1.278 8.175 C 2.377 8.991 4.084 9.515 6 9.515 C 7.916 9.515 9.623 8.991 10.722 8.175 C 10.902 8.433 11 8.711 11 9 Z"
+                    fill="currentColor"
+                />
             </svg>
         )
     }

-Original file line number
+Diff line change
@@ Expand Up / @@ -152,10 +152,6 @@ form { @@
         cursor: pointer;
     }
-    .mapping .source-field input[type="checkbox"]:focus {
-        box-shadow: none;
-    }
     [data-framer-theme="light"] .mapping .source-field input[type="checkbox"]:not(:checked) {
         background: #ccc;
     }
@@ Expand Down Expand Up / @@ -201,7 +197,6 @@ form { @@
     input[type="checkbox"]:checked {
         background-color: #15372c;
-        border-color: #15372c;
     }
     .setup,
@@ Expand Down @@

-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ import { @@
         type FieldDataEntryInput,
         type FieldDataInput,
         framer,
-        ManagedCollection,
+        type ManagedCollection,
         type ManagedCollectionFieldInput,
     } from "framer-plugin"
     import { fetchAllBlogPosts } from "./api"
@@ Expand Down @@

UI update #626

Are you sure you want to change the base?

Uh oh!

UI update #626

Uh oh!

Uh oh!

Diff view

Diff view

There are no files selected for viewing

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

huntercaron Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

GitHub Actions / eslint

madebyisaacr Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

GitHub Actions / typescript

GitHub Actions / typescript

GitHub Actions / typescript

madebyisaacr Apr 17, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

huntercaron Apr 16, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!