UI update

plugins/3rd-party-optimizer/framer.json

@@ -2,5 +2,6 @@
     "id": "d84d6c",
     "name": "3rd-Party Optimizer",
     "modes": ["canvas"],
+    "prereleaseStyles": true,
     "icon": "/icon.svg"
 }

plugins/3rd-party-optimizer/package.json

@@ -13,7 +13,7 @@
         "check-typescript": "run g:check-typescript"
     },
     "dependencies": {
-        "framer-plugin": "^3.6.0",
+        "framer-plugin": "3.11.0-beta.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

plugins/3rd-party-optimizer/src/App.tsx

@@ -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

plugins/airtable/framer.json

@@ -2,5 +2,6 @@
     "id": "aa78c0",
     "name": "Airtable",
     "modes": ["configureManagedCollection", "syncManagedCollection"],
+    "prereleaseStyles": true,
     "icon": "/icon.png"
 }

plugins/airtable/package.json

@@ -14,7 +14,7 @@
         "check-vitest": "vitest run"
     },
     "dependencies": {
-        "framer-plugin": "^3.10.3",
+        "framer-plugin": "3.11.0-beta.2",
         "marked": "^17.0.1",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

plugins/airtable/src/App.css

@@ -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;
 }
 

plugins/ascii/framer.json

@@ -2,5 +2,6 @@
     "id": "TS2xwk",
     "name": "ASCII",
     "modes": ["canvas", "image", "editImage"],
+    "prereleaseStyles": true,
     "icon": "/Thumb@2x.png"
 }

plugins/ascii/package.json

@@ -15,7 +15,7 @@
     },
     "dependencies": {
         "clsx": "^2.1.1",
-        "framer-plugin": "^3.6.0",
+        "framer-plugin": "3.11.0-beta.2",
         "ogl": "^1.0.11",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

plugins/ascii/src/App.css

@@ -147,7 +147,7 @@ body[data-framer-theme="dark"] .gui-row .gui-label {
     min-height: 30px;
     border-radius: 8px;
     border: transparent;
-    background-color: rgb(43, 43, 43);
+    background-color: var(--framer-color-bg-tertiary);
     display: flex;
     align-items: center;
     display: flex;
@@ -206,13 +206,13 @@ body[data-framer-theme="dark"] .gui-row .gui-label {
     }
 }
 
-body[data-framer-theme="light"] {
-    .color-input {
-        background-color: #f3f3f3;
+:where([data-framer-styles="prerelease"])[data-framer-theme="dark"] .color-input {
+    background-color: var(--framer-color-control);
+}
 
-        input[type="color"]::after {
-            border: 1px solid rgba(0, 0, 0, 0.15);
-        }
+body[data-framer-theme="light"] .color-input {
+    input[type="color"]::after {
+        border: 1px solid rgba(0, 0, 0, 0.15);
     }
 }
 
@@ -228,18 +228,6 @@ body[data-framer-theme="light"] .gui-label {
     opacity: 0.33;
 }
 
-.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%;
 }

plugins/ascii/src/utils.ts

@@ -4,8 +4,8 @@ export const BASE_PATH = ""
  * Convenience method to load an image from a canvas.
  * As a transferable bytes array
  */
-export function bytesFromCanvas(canvas: HTMLCanvasElement): Promise<Uint8Array | null> {
-    return new Promise<Uint8Array>((resolve, reject) => {
+export function bytesFromCanvas(canvas: HTMLCanvasElement): Promise<Uint8Array<ArrayBuffer> | null> {
+    return new Promise<Uint8Array<ArrayBuffer>>((resolve, reject) => {
         canvas.toBlob(blob => {
             if (!blob) throw new Error("Blob does not exist")
 

plugins/ashby/framer.json

@@ -2,5 +2,6 @@
     "id": "a3b33y",
     "name": "Ashby",
     "modes": ["syncManagedCollection", "configureManagedCollection"],
+    "prereleaseStyles": true,
     "icon": "/icon.svg"
 }

plugins/ashby/package.json

@@ -14,7 +14,7 @@
         "check-vitest": "run g:check-vitest"
     },
     "dependencies": {
-        "framer-plugin": "^3.6.0",
+        "framer-plugin": "3.11.0-beta.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "valibot": "^1.2.0"

plugins/ashby/src/App.css

@@ -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 {

plugins/cms-export/framer.json

@@ -2,5 +2,6 @@
     "id": "9bbb18",
     "name": "CMS Export",
     "modes": ["collection"],
+    "prereleaseStyles": true,
     "icon": "/icon.png"
 }

plugins/cms-export/package.json

@@ -13,7 +13,7 @@
         "check-typescript": "run g:check-typescript"
     },
     "dependencies": {
-        "framer-plugin": "^3.6.0",
+        "framer-plugin": "3.11.0-beta.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

plugins/code-link/framer.json

@@ -2,6 +2,7 @@
     "id": "40c32f",
     "name": "Code Link",
     "modes": ["canvas", "code"],
+    "prereleaseStyles": true,
     "disableEditViaPlugin": ["code"],
     "icon": "/icon.svg"
 }

plugins/code-link/package.json

@@ -15,7 +15,7 @@
     },
     "dependencies": {
         "@code-link/shared": "workspace:*",
-        "framer-plugin": "3.10.3",
+        "framer-plugin": "3.11.0-beta.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
     },

plugins/code-versions/framer.json

@@ -2,5 +2,6 @@
     "id": "8f5ec6",
     "name": "Code Versions",
     "modes": ["code", "canvas"],
+    "prereleaseStyles": true,
     "icon": "/logo.svg"
 }

plugins/code-versions/package.json

@@ -17,7 +17,7 @@
     "dependencies": {
         "clsx": "^2.1.1",
         "diff": "^8.0.2",
-        "framer-plugin": "3.7.0-alpha.0",
+        "framer-plugin": "3.11.0-beta.2",
         "p-retry": "^7.0.0",
         "prismjs": "^1.30.0",
         "react": "^18.3.1",

plugins/color-extract/framer.json

@@ -2,5 +2,6 @@
     "id": "CbX9_9",
     "name": "Color Extract",
     "icon": "/icon.png",
-    "modes": ["canvas"]
+    "modes": ["canvas"],
+    "prereleaseStyles": true
 }

plugins/color-extract/package.json

@@ -15,7 +15,7 @@
     },
     "dependencies": {
         "extract-colors": "^4.2.1",
-        "framer-plugin": "^3.6.0",
+        "framer-plugin": "3.11.0-beta.2",
         "motion": "^12.23.12",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"

plugins/color-extract/src/App.css

@@ -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%;

plugins/color-extract/src/App.tsx

@@ -5,6 +5,7 @@ import {
     type CanvasNode,
     type ColorStop,
     framer,
+    type Gradient,
     LinearGradient,
     supportsBackgroundGradient,
     supportsBackgroundImage,
@@ -68,8 +69,8 @@ export function App() {
                 return { color: color.hex, position: index / (colors.length - 1) }
             })
 
-            const gradient = node.backgroundGradient
-                ? node.backgroundGradient.cloneWithAttributes({ stops: colorStops })
+            const gradient: Gradient = node.backgroundGradient
+                ? (node.backgroundGradient.cloneWithAttributes({ stops: colorStops }) as unknown as Gradient)
                 : new LinearGradient({ angle: 90, stops: colorStops })
 
             await framer.setAttributes(node.id, {
@@ -114,8 +115,8 @@ export function App() {
                 <>
                     <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)

plugins/concentric/framer.json

@@ -2,5 +2,6 @@
     "id": "pEvFy0",
     "name": "Concentric",
     "icon": "/icon.png",
-    "modes": ["canvas"]
+    "modes": ["canvas"],
+    "prereleaseStyles": true
 }

plugins/concentric/package.json

@@ -15,7 +15,7 @@
     },
     "dependencies": {
         "@radix-ui/react-slider": "^1.3.6",
-        "framer-plugin": "^3.6.0",
+        "framer-plugin": "3.11.0-beta.2",
         "motion": "^12.23.12",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",

plugins/csv-import/framer.json

@@ -2,5 +2,6 @@
     "id": "cbaf26",
     "name": "CSV Import",
     "modes": ["collection"],
+    "prereleaseStyles": true,
     "icon": "/icon.svg"
 }

plugins/csv-import/package.json

@@ -15,7 +15,7 @@
     },
     "dependencies": {
         "csv-parse": "^6.1.0",
-        "framer-plugin": "3.10.2-alpha.0",
+        "framer-plugin": "3.11.0-beta.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "valibot": "^1.2.0"

plugins/csv-import/src/components/CollectionIcon.tsx

@@ -1,10 +1,29 @@
-export function CollectionIcon({ color = "currentColor" }: { color?: string }) {
+import type { SVGProps } from "react"
+
+export function CollectionIcon(props: SVGProps<SVGSVGElement>) {
     return (
-        <svg xmlns="http://www.w3.org/2000/svg" width="10" height="12" fill="none" overflow="visible">
+        <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 5 0 C 7.762 0 10 1.119 10 2.5 C 10 3.881 7.762 5 5 5 C 2.239 5 0 3.881 0 2.5 C 0 1.119 2.239 0 5 0 Z M 10 6 C 10 7.381 7.762 8.5 5 8.5 C 2.239 8.5 0 7.381 0 6 L 0 4 C 0 5.381 2.239 6.5 5 6.5 C 7.762 6.5 10 5.381 10 4 Z M 10 9.5 C 10 10.881 7.762 12 5 12 C 2.239 12 0 10.881 0 9.5 L 0 7.5 C 0 8.881 2.239 10 5 10 C 7.762 10 10 8.881 10 7.5 Z"
-                fill={color}
-            ></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>
     )
 }

plugins/design-system/framer.json

@@ -2,5 +2,6 @@
     "id": "3710d9",
     "name": "Design System",
     "modes": ["canvas"],
+    "prereleaseStyles": true,
     "icon": "/icon.svg"
 }

plugins/design-system/package.json

@@ -13,7 +13,7 @@
         "check-typescript": "run g:check-typescript"
     },
     "dependencies": {
-        "framer-plugin": "^3.6.0",
+        "framer-plugin": "3.11.0-beta.2",
         "radix-ui": "^1.4.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"

plugins/dither/framer.json

@@ -2,5 +2,6 @@
     "id": "TQeWOY",
     "name": "Dither",
     "modes": ["canvas", "image", "editImage"],
+    "prereleaseStyles": true,
     "icon": "/dither.png"
 }

plugins/dither/package.json

@@ -16,7 +16,7 @@
     "dependencies": {
         "clsx": "^2.1.1",
         "colorjs.io": "^0.5.2",
-        "framer-plugin": "^3.6.0",
+        "framer-plugin": "3.11.0-beta.2",
         "ogl": "^1.0.11",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"