diff --git a/plugins/ascii/src/App.css b/plugins/ascii/src/App.css index d943c3dda..12de15313 100644 --- a/plugins/ascii/src/App.css +++ b/plugins/ascii/src/App.css @@ -12,12 +12,8 @@ body[data-framer-theme="light"] { } body[data-framer-theme="dark"] { - --slider-track-left-color: var(--framer-color-tint); - --slider-track-right-color: #444; -} - -body[data-framer-styles="prerelease"][data-framer-theme="dark"] { --slider-track-left-color: #707070; + --slider-track-right-color: #444; } .canvas-container { @@ -153,7 +149,7 @@ body[data-framer-theme="dark"] .gui-row .gui-label { min-height: 30px; border-radius: 8px; border: transparent; - background-color: var(--framer-color-bg-tertiary); + background-color: var(--framer-color-control); display: flex; align-items: center; display: flex; @@ -212,10 +208,6 @@ body[data-framer-theme="dark"] .gui-row .gui-label { } } -:where([data-framer-styles="prerelease"])[data-framer-theme="dark"] .color-input { - background-color: var(--framer-color-control); -} - body[data-framer-theme="light"] .color-input { input[type="color"]::after { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); @@ -277,7 +269,7 @@ input[type="range"]::-webkit-slider-runnable-track { var(--slider-track-right-color) var(--progress) ); border-radius: 2px; - height: 2px; + height: 3px; will-change: transform; } @@ -290,10 +282,10 @@ input[type="range"]::-webkit-slider-thumb { 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.1) !important; cursor: pointer; - height: 10px; - margin-top: -4px; + height: 12px; + width: 12px; + margin-top: -4.5px; opacity: 1; - width: 10px; will-change: transform; } @@ -305,7 +297,7 @@ input[type="range"]::-moz-range-track { var(--slider-track-right-color) var(--progress) ); border-radius: 2px; - height: 2px; + height: 3px; border: none; } @@ -317,25 +309,6 @@ input[type="range"]::-moz-range-thumb { 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.1) !important; cursor: pointer; - height: 10px; - width: 10px; -} - -[data-framer-styles="prerelease"] input[type="range"]::-webkit-slider-runnable-track { - height: 3px; -} - -[data-framer-styles="prerelease"] input[type="range"]::-webkit-slider-thumb { - height: 12px; - width: 12px; - margin-top: -4.5px; -} - -[data-framer-styles="prerelease"] input[type="range"]::-moz-range-track { - height: 3px; -} - -[data-framer-styles="prerelease"] input[type="range"]::-moz-range-thumb { height: 12px; width: 12px; } diff --git a/plugins/csv-import/src/App.css b/plugins/csv-import/src/App.css index dc6853860..e669c2204 100644 --- a/plugins/csv-import/src/App.css +++ b/plugins/csv-import/src/App.css @@ -17,16 +17,12 @@ body { align-items: center; text-align: left; height: 100%; - gap: 15px; + gap: 10px; padding-left: 15px; padding-right: 15px; padding-bottom: 15px; } -[data-framer-styles="prerelease"] .import-collection { - gap: 10px; -} - .select-csv-file { display: flex; flex-direction: column; diff --git a/plugins/csv-import/src/components/CollectionIcon.tsx b/plugins/csv-import/src/components/CollectionIcon.tsx index eabb081e6..ac7fca987 100644 --- a/plugins/csv-import/src/components/CollectionIcon.tsx +++ b/plugins/csv-import/src/components/CollectionIcon.tsx @@ -1,9 +1,5 @@ -import { useMemo } from "react" - export function CollectionIcon() { - const isPrerelease = useMemo(() => document.body.getAttribute("data-framer-styles") === "prerelease", []) - - return isPrerelease ? ( + return ( - ) : ( - - - - - ) } diff --git a/plugins/dither/src/App.css b/plugins/dither/src/App.css index edff0f158..6cde016ad 100644 --- a/plugins/dither/src/App.css +++ b/plugins/dither/src/App.css @@ -27,12 +27,8 @@ body[data-framer-theme="light"] { } body[data-framer-theme="dark"] { - --slider-track-left-color: var(--framer-color-tint); - --slider-track-right-color: #444; -} - -body[data-framer-styles="prerelease"][data-framer-theme="dark"] { --slider-track-left-color: #707070; + --slider-track-right-color: #444; } .canvas-container { @@ -133,7 +129,7 @@ body[data-framer-theme="dark"] .gui-row .gui-label { min-height: 30px; border-radius: 8px; border: transparent; - background-color: var(--framer-color-bg-tertiary); + background-color: var(--framer-color-control); display: flex; align-items: center; display: flex; @@ -191,10 +187,6 @@ body[data-framer-theme="dark"] .gui-row .gui-label { } } -:where([data-framer-styles="prerelease"])[data-framer-theme="dark"] .color-input { - background-color: var(--framer-color-control); -} - body[data-framer-theme="light"] .color-input { input[type="color"]::after { border: 1px solid rgba(0, 0, 0, 0.15); @@ -270,7 +262,7 @@ input[type="range"]::-webkit-slider-runnable-track { var(--slider-track-right-color) var(--progress) ); border-radius: 2px; - height: 2px; + height: 3px; will-change: transform; } @@ -283,10 +275,10 @@ input[type="range"]::-webkit-slider-thumb { 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.1) !important; cursor: pointer; - height: 10px; - margin-top: -4px; + height: 12px; + width: 12px; + margin-top: -4.5px; opacity: 1; - width: 10px; will-change: transform; } @@ -298,7 +290,7 @@ input[type="range"]::-moz-range-track { var(--slider-track-right-color) var(--progress) ); border-radius: 2px; - height: 2px; + height: 3px; border: none; } @@ -310,25 +302,6 @@ input[type="range"]::-moz-range-thumb { 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 0.5px 0px 0px rgba(0, 0, 0, 0.1) !important; cursor: pointer; - height: 10px; - width: 10px; -} - -[data-framer-styles="prerelease"] input[type="range"]::-webkit-slider-runnable-track { - height: 3px; -} - -[data-framer-styles="prerelease"] input[type="range"]::-webkit-slider-thumb { - height: 12px; - width: 12px; - margin-top: -4.5px; -} - -[data-framer-styles="prerelease"] input[type="range"]::-moz-range-track { - height: 3px; -} - -[data-framer-styles="prerelease"] input[type="range"]::-moz-range-thumb { height: 12px; width: 12px; } diff --git a/plugins/global-search/src/components/ui/IconCollection.tsx b/plugins/global-search/src/components/ui/IconCollection.tsx index 6db402afb..609c2f7d5 100644 --- a/plugins/global-search/src/components/ui/IconCollection.tsx +++ b/plugins/global-search/src/components/ui/IconCollection.tsx @@ -1,9 +1,7 @@ -import { type SVGProps, useMemo } from "react" +import { type SVGProps } from "react" export function IconCollection(props: SVGProps) { - const isPrerelease = useMemo(() => document.body.getAttribute("data-framer-styles") === "prerelease", []) - - return isPrerelease ? ( + return ( ) { d="M10.25 3.25c0 1.105-1.903 2-4.25 2s-4.25-.895-4.25-2M10.25 6c0 1.105-1.903 2-4.25 2s-4.25-.895-4.25-2" /> - ) : ( - - - - - ) } diff --git a/plugins/global-search/src/components/ui/IconComponent.tsx b/plugins/global-search/src/components/ui/IconComponent.tsx index 6576792da..93cfb91a5 100644 --- a/plugins/global-search/src/components/ui/IconComponent.tsx +++ b/plugins/global-search/src/components/ui/IconComponent.tsx @@ -1,9 +1,7 @@ -import { type SVGProps, useMemo } from "react" +import { type SVGProps } from "react" export function IconComponent(props: SVGProps) { - const isPrerelease = useMemo(() => document.body.getAttribute("data-framer-styles") === "prerelease", []) - - return isPrerelease ? ( + return ( ) { /> - ) : ( - - - ) } diff --git a/plugins/global-search/src/components/ui/IconWebPage.tsx b/plugins/global-search/src/components/ui/IconWebPage.tsx index 3a485a62e..fd336f78b 100644 --- a/plugins/global-search/src/components/ui/IconWebPage.tsx +++ b/plugins/global-search/src/components/ui/IconWebPage.tsx @@ -1,9 +1,7 @@ -import { type SVGProps, useMemo } from "react" +import { type SVGProps } from "react" export function IconWebPage(props: SVGProps) { - const isPrerelease = useMemo(() => document.body.getAttribute("data-framer-styles") === "prerelease", []) - - return isPrerelease ? ( + return ( ) { strokeWidth="1.5" /> - ) : ( - - - ) } diff --git a/plugins/renamer/src/App.css b/plugins/renamer/src/App.css index 83d124ff6..55cd3c7e9 100644 --- a/plugins/renamer/src/App.css +++ b/plugins/renamer/src/App.css @@ -45,48 +45,19 @@ display: flex; align-items: center; flex-shrink: 0; - padding: 15px; - position: relative; -} - -[data-framer-styles="prerelease"] .tabs { padding: 0 15px; -} - -.tabs:before { - content: ""; - position: absolute; - top: 0; - left: 15px; - right: 15px; - height: 1px; - background-color: var(--framer-color-divider); - z-index: 1; -} - -[data-framer-styles="prerelease"] .tabs:before { - display: none; + position: relative; } .tabs-container { position: relative; display: flex; + width: 100%; + height: auto; flex-direction: row; align-items: center; - justify-content: space-around; - background-color: var(--framer-color-bg-tertiary); - border-radius: 8px; - width: 100%; - padding: 2px; - height: 30px; -} - -[data-framer-styles="prerelease"] .tabs-container { justify-content: start; - background-color: transparent; - border-radius: 0; padding: 10px 0; - height: auto; border-top: 1px solid var(--framer-color-divider); border-bottom: 1px solid var(--framer-color-divider); } @@ -95,15 +66,9 @@ position: relative; background: none !important; border: 0; - flex: 1; - height: 100%; color: #999999; font-weight: 500; user-select: none; - transition: color 200ms ease; -} - -[data-framer-styles="prerelease"] .tab { flex: none; width: fit-content; height: 30px; @@ -113,20 +78,9 @@ background-color 100ms ease; } -.tab:not(.active):hover { - color: var(--framer-color-text-secondary); -} - -[data-framer-styles="prerelease"] .tab:not(.active):hover { - color: #999999; -} - .tab.active { color: var(--framer-color-text); font-weight: 600; -} - -[data-framer-styles="prerelease"] .tab.active { background-color: var(--framer-color-bg-tertiary) !important; } @@ -257,17 +211,6 @@ inset: 0; } -body:not([data-framer-styles="prerelease"]) .results-container:before { - content: ""; - position: absolute; - top: 0; - left: 15px; - right: 15px; - height: 1px; - background-color: var(--framer-color-divider); - z-index: 1; -} - .results-container.is-scrollable:after { content: ""; position: absolute; @@ -283,10 +226,6 @@ body:not([data-framer-styles="prerelease"]) .results-container:before { flex: 1; height: 100%; overflow-y: auto; - padding: 15px; -} - -[data-framer-styles="prerelease"] .container { padding: 10px 15px; } diff --git a/plugins/renamer/src/components/LayerIcon.tsx b/plugins/renamer/src/components/LayerIcon.tsx index 9d73e6abe..9165c18b7 100644 --- a/plugins/renamer/src/components/LayerIcon.tsx +++ b/plugins/renamer/src/components/LayerIcon.tsx @@ -1,4 +1,3 @@ -import { useMemo } from "react" import type { IndexNodeType } from "../search/types" interface Props { @@ -7,190 +6,113 @@ interface Props { } export default function LayerIcon({ type, isBreakpoint }: Props) { - const isPrerelease = useMemo(() => document.body.getAttribute("data-framer-styles") === "prerelease", []) - let icon = null - if (isPrerelease) { - switch (type) { - case "TextNode": - icon = ( - - - - - - ) - break - case "FrameNode": - icon = isBreakpoint ? ( - - - - - - - - - - ) : ( - - - - ) - break - - case "ComponentInstanceNode": - icon = ( - + - - - - ) - break + + + + ) + break + case "FrameNode": + icon = isBreakpoint ? ( + + + + + + + + + + ) : ( + + + + ) + break - default: - icon = null - } - } else { - switch (type) { - case "TextNode": - icon = ( - - - - ) - break - - case "FrameNode": - icon = isBreakpoint ? ( - - - - - ) : ( - - - - ) - break - - case "ComponentInstanceNode": - icon = ( - - - - ) - break + case "ComponentInstanceNode": + icon = ( + + + + + ) + break - default: - icon = null - } + default: + icon = null } return {icon} diff --git a/plugins/renamer/src/components/Tabs.tsx b/plugins/renamer/src/components/Tabs.tsx index 52d05ca97..481bea90b 100644 --- a/plugins/renamer/src/components/Tabs.tsx +++ b/plugins/renamer/src/components/Tabs.tsx @@ -1,5 +1,4 @@ import cx from "classnames" -import { useMemo } from "react" interface TabItem { label: string @@ -12,26 +11,9 @@ interface Props { } export default function Tabs({ items }: Props) { - const isPrerelease = useMemo(() => document.body.getAttribute("data-framer-styles") === "prerelease", []) - const activeIndex = items.findIndex(item => item.active) - return ( - {!isPrerelease && ( - - {activeIndex !== -1 && ( - - )} - - )} - {items.map((item, index) => ( {item.label}