unframer 3.0.6 → 3.2.0

package/src/react.tsx

@@ -163,7 +163,12 @@ export const WithFramerBreakpoints = <
             return breakpoint
         },
         () => {
-            // on server and during hydration
+            if (typeof window !== 'undefined') {
+                const breakpoint = getBreakpointNameFromWindowWidth(
+                    window.innerWidth,
+                )
+                return breakpoint
+            }
 
             return ''
         },
@@ -335,34 +340,65 @@ export function AdaptedLink({
     const route = routes?.[webPageId]
     const target = openInNewTab ? '_blank' : undefined
     if (isRelativeLink(href) || isMailto(href)) {
-        return React.cloneElement(children, {
-            ...rest,
-            onClick: navigateClientSide,
-            href,
-            target,
-        })
+        return (
+            <>
+                {React.cloneElement(children, {
+                    ...rest,
+                    suppressHydrationWarning: true,
+                    onClick: navigateClientSide,
+                    href,
+                    target,
+                })}
+            </>
+        )
     }
     if (!webPageId) {
-        return <Link href={href} {...rest} {...onlyForFramer} />
+        return (
+            <Link
+                suppressHydrationWarning={true}
+                href={href}
+                {...rest}
+                {...onlyForFramer}
+            />
+        )
     }
 
     if (!route || !route.path) {
-        return <Link href={href} {...rest} {...onlyForFramer} />
+        return (
+            <Link
+                suppressHydrationWarning={true}
+                href={href}
+                {...rest}
+                {...onlyForFramer}
+            />
+        )
     }
     let resolvedPath = route.path
     if (pathVariables) {
         resolvedPath = replacePathParams(resolvedPath, pathVariables)
     }
     if (isRelativeLink(resolvedPath) || isMailto(href)) {
-        return React.cloneElement(children, {
-            ...rest,
-            onClick: navigateClientSide,
-            href: resolvedPath,
-            target,
-        })
+        return (
+            <>
+                {React.cloneElement(children, {
+                    ...rest,
+                    suppressHydrationWarning: true,
+                    onClick: navigateClientSide,
+                    href: resolvedPath,
+                    target,
+                })}
+            </>
+        )
     }
 
-    return <Link href={resolvedPath} {...rest} {...onlyForFramer} />
+    return (
+        <Link
+            href={resolvedPath}
+            suppressHydrationWarning={true}
+            {...rest}
+            {...onlyForFramer}
+        />
+    )
 }
 
 export function ContextProviders({

package/src/styles/framer.css

@@ -167,6 +167,7 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
         li.framer-text,
         ol.framer-text,
         ul.framer-text,
+        mark.framer-text,
         span.framer-text:not([data-text-fill]) {
             font-family: var(--framer-blockquote-font-family, var(--framer-font-family, Inter, Inter Placeholder, sans-serif));
             font-style: var(--framer-blockquote-font-style, var(--framer-font-style, normal));
@@ -193,6 +194,24 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
         }
     
 
+        mark.framer-text,
+        p.framer-text,
+        div.framer-text,
+        h1.framer-text,
+        h2.framer-text,
+        h3.framer-text,
+        h4.framer-text,
+        h5.framer-text,
+        h6.framer-text,
+        li.framer-text,
+        ol.framer-text,
+        ul.framer-text {
+            background-color: var(--framer-blockquote-text-background-color, var(--framer-text-background-color, initial));
+            border-radius: var(--framer-blockquote-text-background-radius, var(--framer-text-background-radius, initial));
+            padding: var(--framer-blockquote-text-background-padding, var(--framer-text-background-padding, initial));
+        }
+    
+
         @supports not (color: color(display-p3 1 1 1)) {
             p.framer-text,
             div.framer-text,
@@ -209,6 +228,10 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
                 color: var(--framer-blockquote-text-color-rgb, var(--framer-blockquote-text-color, var(--framer-text-color-rgb, var(--framer-text-color, #000))));
                 -webkit-text-stroke-color: var(--framer-text-stroke-color-rgb, var(--framer-text-stroke-color, initial));
             }
+
+            mark.framer-text {
+                background-color: var(--framer-blockquote-text-background-color-rgb, var(--framer-blockquote-text-background-color, var(--framer-text-background-color-rgb, var(--framer-text-background-color, initial))));
+            }
         }
     
 
@@ -318,6 +341,10 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
             text-transform: var(--framer-blockquote-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none)));
             /* Cursor inherit to overwrite the user agent stylesheet on rich text links. */
             cursor: var(--framer-custom-cursors, pointer);
+            /* Don't inherit background styles from any parent text style. */
+            background-color: var(--framer-link-text-background-color, initial);
+            border-radius: var(--framer-link-text-background-radius, initial);
+            padding: var(--framer-link-text-background-padding, initial);
         }
     
 
@@ -338,6 +365,7 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
             span.framer-text[data-nested-link],
             span.framer-text[data-nested-link] span.framer-text:not([data-text-fill]) {
                 color: var(--framer-blockquote-text-color-rgb, var(--framer-blockquote-text-color, var(--framer-link-text-color-rgb, var(--framer-link-text-color, var(--framer-text-color-rgb, var(--framer-text-color, #000))))));
+                background-color: var(--framer-link-text-background-color-rgb, var(--framer-link-text-background-color, initial));
             }
         }
     
@@ -374,6 +402,9 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
             color: var(--framer-link-hover-text-color, var(--framer-blockquote-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))));
             font-size: calc(var(--framer-link-hover-font-size, var(--framer-blockquote-font-size, var(--framer-font-size, 16px))) * var(--framer-font-size-scale, 1));
             text-transform: var(--framer-link-hover-text-transform, var(--framer-blockquote-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none))));
+            background-color: var(--framer-link-hover-text-background-color, var(--framer-link-text-background-color, var(--framer-text-background-color, initial)));
+            border-radius: var(--framer-link-hover-text-background-radius, var(--framer-link-text-background-radius, var(--framer-text-background-radius, initial)));
+            padding: var(--framer-link-hover-text-background-padding, var(--framer-link-text-background-padding, var(--framer-text-background-padding, initial)));
         }
     
 
@@ -394,6 +425,7 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
         span.framer-text[data-nested-link]:hover,
         span.framer-text[data-nested-link]:hover span.framer-text:not([data-text-fill]) {
             color: var(--framer-link-hover-text-color-rgb, var(--framer-link-hover-text-color, var(--framer-blockquote-text-color-rgb, var(--framer-blockquote-text-color, var(--framer-link-text-color-rgb, var(--framer-link-text-color, var(--framer-text-color-rgb, var(--framer-text-color, #000))))))));
+            background-color: var(--framer-link-hover-text-background-color-rgb, var(--framer-link-hover-text-background-color, var(--framer-link-text-background-color-rgb, var(--framer-link-text-background-color, var(--framer-text-background-color-rgb, var(--framer-text-background-color, initial))))));
         }
     }
     
@@ -430,6 +462,9 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
             color: var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-text-color, #000)));
             font-size: calc(var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px))) * var(--framer-font-size-scale, 1));
             text-transform: var(--framer-link-current-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none)));
+            background-color: var(--framer-link-current-text-background-color, var(--framer-link-text-background-color, initial));
+            border-radius: var(--framer-link-current-text-background-radius, var(--framer-link-text-background-radius, initial));
+            padding: var(--framer-link-current-text-background-padding, var(--framer-link-text-background-padding, initial));
         }
     
 
@@ -450,6 +485,7 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
             span.framer-text[data-framer-page-link-current],
             span.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]) {
                 color: var(--framer-link-current-text-color-rgb, var(--framer-link-current-text-color, var(--framer-link-text-color-rgb, var(--framer-link-text-color, var(--framer-text-color-rgb, var(--framer-text-color, #000))))));
+                background-color: var(--framer-link-current-text-background-color-rgb, var(--framer-link-current-text-background-color, var(--framer-link-text-background-color-rgb, var(--framer-link-text-background-color, var(--framer-text-background-color-rgb, var(--framer-text-background-color, initial))))));
             }
         }
     
@@ -472,6 +508,7 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
             code.framer-text span.framer-text[data-framer-page-link-current],
             code.framer-text span.framer-text[data-framer-page-link-current] span.framer-text:not([data-text-fill]) {
                 color: var(--framer-link-current-text-color-rgb, var(--framer-link-current-text-color, var(--framer-link-text-color-rgb, var(--framer-link-text-color, var(--framer-code-text-color-rgb, var(--framer-code-text-color, var(--framer-text-color-rgb, var(--framer-text-color, #000))))))));
+                background-color: var(--framer-link-current-text-background-color-rgb, var(--framer-link-current-text-background-color, var(--framer-link-text-background-color-rgb, var(--framer-link-text-background-color, var(--framer-text-background-color-rgb, var(--framer-text-background-color, initial))))));
             }
         }
     
@@ -486,6 +523,9 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
             color: var(--framer-link-hover-text-color, var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-text-color, #000))));
             font-size: calc(var(--framer-link-hover-font-size, var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px)))) * var(--framer-font-size-scale, 1));
             text-transform: var(--framer-link-hover-text-transform, var(--framer-link-current-text-transform, var(--framer-link-text-transform, var(--framer-text-transform, none))));
+            background-color: var(--framer-link-hover-text-background-color, var(--framer-link-current-text-background-color, var(--framer-link-text-background-color, initial)));
+            border-radius: var(--framer-link-hover-text-background-radius, var(--framer-link-current-text-background-radius, var(--framer-link-text-background-radius, initial)));
+            padding: var(--framer-link-hover-text-background-padding, var(--framer-link-current-text-background-padding, var(--framer-link-text-background-padding, initial)));
         }
     
 
@@ -506,6 +546,7 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
             span.framer-text[data-framer-page-link-current]:hover,
             span.framer-text[data-framer-page-link-current]:hover span.framer-text:not([data-text-fill]) {
                 color: var(--framer-link-hover-text-color-rgb, var(--framer-link-hover-text-color, var(--framer-link-current-text-color-rgb, var(--framer-link-current-text-color, var(--framer-link-text-color-rgb, var(--framer-link-text-color, var(--framer-code-text-color-rgb, var(--framer-code-text-color, var(--framer-text-color-rgb, var(--framer-text-color, #000))))))))));
+                background-color: var(--framer-link-hover-text-background-color-rgb, var(--framer-link-hover-text-background-color, var(--framer-link-current-text-background-color-rgb, var(--framer-link-current-text-background-color, var(--framer-link-text-background-color-rgb, var(--framer-link-text-background-color, initial))))));
             }
         }
     
@@ -519,6 +560,9 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
             font-weight: var(--framer-code-font-weight, var(--framer-font-weight, 400));
             color: var(--framer-link-hover-text-color, var(--framer-link-current-text-color, var(--framer-link-text-color, var(--framer-code-text-color, var(--framer-text-color, #000)))));
             font-size: calc(var(--framer-link-hover-font-size, var(--framer-link-current-font-size, var(--framer-link-font-size, var(--framer-font-size, 16px)))) * var(--framer-font-size-scale, 1));
+            background-color: var(--framer-link-hover-text-background-color, var(--framer-link-current-text-background-color, var(--framer-link-text-background-color, var(--framer-text-background-color, initial))));
+            border-radius: var(--framer-link-hover-text-background-radius, var(--framer-link-current-text-background-radius, var(--framer-link-text-background-radius, var(--framer-text-background-radius, initial))));
+            padding: var(--framer-link-hover-text-background-padding, var(--framer-link-current-text-background-padding, var(--framer-link-text-background-padding, var(--framer-text-background-padding, initial))));
         }
     
 
@@ -528,6 +572,7 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
             code.framer-text span.framer-text[data-framer-page-link-current]:hover,
             code.framer-text span.framer-text[data-framer-page-link-current]:hover span.framer-text:not([data-text-fill]) {
                 color: var(--framer-link-hover-text-color-rgb, var(--framer-link-hover-text-color, var(--framer-link-current-text-color-rgb, var(--framer-link-current-text-color, var(--framer-link-text-color-rgb, var(--framer-link-text-color, var(--framer-code-text-color-rgb, var(--framer-code-text-color, var(--framer-text-color-rgb, var(--framer-text-color, #000))))))))));
+                background-color: var(--framer-link-hover-text-background-color-rgb, var(--framer-link-hover-text-background-color, var(--framer-link-current-text-background-color-rgb, var(--framer-link-current-text-background-color, var(--framer-link-text-background-color-rgb, var(--framer-link-text-background-color, initial))))));
             }
         }
     
@@ -556,6 +601,9 @@ body { --framer-will-change-override: none; --framer-will-change-effect-override
             --framer-line-height: 1.2em;
             --framer-text-alignment: start;
             --framer-font-open-type-features: normal;
+            --framer-text-background-color: initial;
+            --framer-text-background-radius: initial;
+            --framer-text-background-padding: initial;
         }
     
 
@@ -941,4 +989,7 @@ NavigationContainer
 }
 [data-hide-scrollbars="true"]::-webkit-scrollbar { width: 0px; height: 0px; }
 [data-hide-scrollbars="true"]::-webkit-scrollbar-thumb { background: transparent; }
-[data-hide-scrollbars="true"] { scrollbar-width: none; }
+[data-hide-scrollbars="true"] { scrollbar-width: none; }
+@supports (not (overflow: clip)) {
+        :root { --overflow-clip-fallback: hidden; }
+    }

package/src/version.ts

@@ -1 +1 @@
-export const version = '3.0.6'
+export const version = '3.2.0'