From 4e7b2f710b36e9fc64c9fbd198dbd85b8189133f Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Tue, 19 May 2026 16:35:18 -0400
Subject: [PATCH 1/5] ASCII and Dither prerelease styles

---
 plugins/ascii/src/App.css  | 43 ++++++++++++++++++++++++++++++++------
 plugins/dither/src/App.css | 40 ++++++++++++++++++++++++++++-------
 2 files changed, 70 insertions(+), 13 deletions(-)

diff --git a/plugins/ascii/src/App.css b/plugins/ascii/src/App.css
index f94d57d74..1f43f0ada 100644
--- a/plugins/ascii/src/App.css
+++ b/plugins/ascii/src/App.css
@@ -43,17 +43,17 @@ body[data-framer-theme="dark"] {
     position: absolute;
     inset: 0px;
     border-radius: 10px;
-    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
     pointer-events: none;
 }
 
 body[data-framer-theme="light"] {
     .canvas-container {
-        background-color: rgba(0, 0, 0, 0.15);
+        background-color: var(--framer-color-bg-tertiary);
     }
 
     .canvas-container::after {
-        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
     }
 }
 
@@ -194,7 +194,7 @@ body[data-framer-theme="dark"] .gui-row .gui-label {
         position: absolute;
         inset: 0px;
         border-radius: 4px;
-        border: 1px solid rgba(255, 255, 255, 0.15);
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
     }
 
     input[type="color"]::-webkit-color-swatch-wrapper {
@@ -212,7 +212,7 @@ body[data-framer-theme="dark"] .gui-row .gui-label {
 
 body[data-framer-theme="light"] .color-input {
     input[type="color"]::after {
-        border: 1px solid rgba(0, 0, 0, 0.15);
+        box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
     }
 }
 
@@ -315,6 +315,33 @@ input[type="range"]::-moz-range-thumb {
     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;
+}
+
+[data-framer-styles="prerelease"][data-framer-theme="dark"] input[type="range"]::-webkit-slider-runnable-track {
+    background: linear-gradient(to right, #707070 var(--progress), var(--slider-track-color) var(--progress));
+}
+
+[data-framer-styles="prerelease"][data-framer-theme="dark"] input[type="range"]::-moz-range-track {
+    background: linear-gradient(to right, #707070 var(--progress), var(--slider-track-color) var(--progress));
+}
+
 /* Hide number input stepper buttons in Firefox */
 input[type="number"] {
     -moz-appearance: textfield;
@@ -352,10 +379,14 @@ input[type="number"] {
 }
 
 .segmented-control-item.active {
-    color: var(--framer-color-text);
+    color: var(--framer-color-tint);
     font-weight: 600;
 }
 
+[data-framer-theme="dark"] .segmented-control-item.active {
+    color: var(--framer-color-text);
+}
+
 .segmented-control-bg-container {
     position: absolute;
     inset: 2px;
diff --git a/plugins/dither/src/App.css b/plugins/dither/src/App.css
index fbe7ffa23..0a2fd1b56 100644
--- a/plugins/dither/src/App.css
+++ b/plugins/dither/src/App.css
@@ -70,14 +70,17 @@ body[data-framer-theme="dark"] {
     position: absolute;
     inset: 0px;
     border-radius: 10px;
-    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
-    /* border: 1px solid red; */
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
     pointer-events: none;
 }
 
 body[data-framer-theme="light"] {
+    .canvas-container {
+        background-color: var(--framer-color-bg-tertiary);
+    }
+
     .canvas-container::after {
-        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
+        box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
     }
 }
 
@@ -221,10 +224,6 @@ body[data-framer-theme="dark"] .error-container {
 }
 
 body[data-framer-theme="light"] {
-    .canvas-container {
-        background: unset;
-    }
-
     .error-container {
         background: rgba(0, 0, 0, 0.05);
     }
@@ -325,6 +324,33 @@ input[type="range"]::-moz-range-thumb {
     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;
+}
+
+[data-framer-styles="prerelease"][data-framer-theme="dark"] input[type="range"]::-webkit-slider-runnable-track {
+    background: linear-gradient(to right, #707070 var(--progress), var(--slider-track-color) var(--progress));
+}
+
+[data-framer-styles="prerelease"][data-framer-theme="dark"] input[type="range"]::-moz-range-track {
+    background: linear-gradient(to right, #707070 var(--progress), var(--slider-track-color) var(--progress));
+}
+
 /* Hide number input stepper buttons in Firefox */
 input[type="number"] {
     -moz-appearance: textfield;

From d43c69ac39f4ff9bf94255852f51177948ff04ed Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Tue, 19 May 2026 16:38:50 -0400
Subject: [PATCH 2/5] Fix double border

---
 plugins/dither/src/App.css | 16 ----------------
 plugins/dither/src/App.tsx |  2 +-
 2 files changed, 1 insertion(+), 17 deletions(-)

diff --git a/plugins/dither/src/App.css b/plugins/dither/src/App.css
index 0a2fd1b56..df680e3cf 100644
--- a/plugins/dither/src/App.css
+++ b/plugins/dither/src/App.css
@@ -11,8 +11,6 @@
     justify-content: center;
     width: 100%;
     aspect-ratio: 16 / 9;
-    border-radius: 8px;
-    border: 1px solid var(--framer-color-divider);
 }
 
 .error-container p {
@@ -219,20 +217,6 @@ button:disabled {
     opacity: 0.33;
 }
 
-body[data-framer-theme="dark"] .error-container {
-    border-color: rgba(255, 255, 255, 0.05);
-}
-
-body[data-framer-theme="light"] {
-    .error-container {
-        background: rgba(0, 0, 0, 0.05);
-    }
-}
-
-body[data-framer-theme="dark"] .error-container {
-    background: rgba(0, 0, 0, 0.4);
-}
-
 * {
     user-select: none;
 }
diff --git a/plugins/dither/src/App.tsx b/plugins/dither/src/App.tsx
index 0693ba042..b9bf1d2bf 100644
--- a/plugins/dither/src/App.tsx
+++ b/plugins/dither/src/App.tsx
@@ -310,7 +310,7 @@ function DitherImage({ image }: { image: ImageAsset | null }) {
                             uploadRef.current?.click()
                         }}
                     >
-                        <p>Select an Image...</p>
+                        <p>Select an Image…</p>
                     </div>
                 )}
             </div>

From c7ea86f403b5485f9b8c55e150a41c8af053fdb1 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Tue, 19 May 2026 16:48:43 -0400
Subject: [PATCH 3/5] Segmented control style

---
 plugins/ascii/src/App.css | 25 ++++++++++++++++++++-----
 1 file changed, 20 insertions(+), 5 deletions(-)

diff --git a/plugins/ascii/src/App.css b/plugins/ascii/src/App.css
index 1f43f0ada..d16b72d7d 100644
--- a/plugins/ascii/src/App.css
+++ b/plugins/ascii/src/App.css
@@ -398,13 +398,28 @@ input[type="number"] {
     bottom: 0;
     border-radius: 6px;
     background-color: var(--framer-color-bg);
-    box-shadow:
-        0px 0px 0px 1px rgba(0, 0, 0, 0.02),
-        0px 1px 0px 0px rgba(0, 0, 0, 0.05),
-        0px 2px 4px 0px rgba(0, 0, 0, 0.1);
     transition: left 150ms ease;
 }
 
+[data-framer-theme="light"] .segmented-control-bg {
+    box-shadow:
+        0px 0px 0px 1px rgba(0, 0, 0, 0.04),
+        0px 1px 0px 0px rgba(0, 0, 0, 0.04),
+        0px 2px 4px 0px rgba(0, 0, 0, 0.08);
+}
+
 [data-framer-theme="dark"] .segmented-control-bg {
-    background-color: #555;
+    background-color: #474747;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.03);
+}
+
+[data-framer-theme="dark"] .segmented-control-bg::after {
+    content: "";
+    position: absolute;
+    inset: 0px;
+    border-radius: 6px;
+    pointer-events: none;
+    box-shadow: inset 0 0 0 1px #ffffff0d;
+    mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
+    -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
 }

From e5d03593ce693492c731d76b757d5d7bf5c77057 Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Wed, 20 May 2026 10:47:53 -0400
Subject: [PATCH 4/5] Clean up prerelease slider colors

---
 plugins/ascii/src/App.css  | 26 ++++++++++++--------------
 plugins/dither/src/App.css | 26 ++++++++++++--------------
 2 files changed, 24 insertions(+), 28 deletions(-)

diff --git a/plugins/ascii/src/App.css b/plugins/ascii/src/App.css
index d16b72d7d..05a278ab0 100644
--- a/plugins/ascii/src/App.css
+++ b/plugins/ascii/src/App.css
@@ -7,11 +7,17 @@ html * {
 }
 
 body[data-framer-theme="light"] {
-    --slider-track-color: #ddd;
+    --slider-track-left-color: var(--framer-color-tint);
+    --slider-track-right-color: #ddd;
 }
 
 body[data-framer-theme="dark"] {
-    --slider-track-color: #444;
+    --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;
 }
 
 .canvas-container {
@@ -267,8 +273,8 @@ input[type="range"]:focus {
 input[type="range"]::-webkit-slider-runnable-track {
     background: linear-gradient(
         to right,
-        var(--framer-color-tint) var(--progress),
-        var(--slider-track-color) var(--progress)
+        var(--slider-track-left-color) var(--progress),
+        var(--slider-track-right-color) var(--progress)
     );
     border-radius: 2px;
     height: 2px;
@@ -295,8 +301,8 @@ input[type="range"]::-webkit-slider-thumb {
 input[type="range"]::-moz-range-track {
     background: linear-gradient(
         to right,
-        var(--framer-color-tint) var(--progress),
-        var(--slider-track-color) var(--progress)
+        var(--slider-track-left-color) var(--progress),
+        var(--slider-track-right-color) var(--progress)
     );
     border-radius: 2px;
     height: 2px;
@@ -334,14 +340,6 @@ input[type="range"]::-moz-range-thumb {
     width: 12px;
 }
 
-[data-framer-styles="prerelease"][data-framer-theme="dark"] input[type="range"]::-webkit-slider-runnable-track {
-    background: linear-gradient(to right, #707070 var(--progress), var(--slider-track-color) var(--progress));
-}
-
-[data-framer-styles="prerelease"][data-framer-theme="dark"] input[type="range"]::-moz-range-track {
-    background: linear-gradient(to right, #707070 var(--progress), var(--slider-track-color) var(--progress));
-}
-
 /* Hide number input stepper buttons in Firefox */
 input[type="number"] {
     -moz-appearance: textfield;
diff --git a/plugins/dither/src/App.css b/plugins/dither/src/App.css
index df680e3cf..edff0f158 100644
--- a/plugins/dither/src/App.css
+++ b/plugins/dither/src/App.css
@@ -22,11 +22,17 @@ html * {
 }
 
 body[data-framer-theme="light"] {
-    --slider-track-color: #ddd;
+    --slider-track-left-color: var(--framer-color-tint);
+    --slider-track-right-color: #ddd;
 }
 
 body[data-framer-theme="dark"] {
-    --slider-track-color: #444;
+    --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;
 }
 
 .canvas-container {
@@ -260,8 +266,8 @@ input[type="range"]:focus {
 input[type="range"]::-webkit-slider-runnable-track {
     background: linear-gradient(
         to right,
-        var(--framer-color-tint) var(--progress),
-        var(--slider-track-color) var(--progress)
+        var(--slider-track-left-color) var(--progress),
+        var(--slider-track-right-color) var(--progress)
     );
     border-radius: 2px;
     height: 2px;
@@ -288,8 +294,8 @@ input[type="range"]::-webkit-slider-thumb {
 input[type="range"]::-moz-range-track {
     background: linear-gradient(
         to right,
-        var(--framer-color-tint) var(--progress),
-        var(--slider-track-color) var(--progress)
+        var(--slider-track-left-color) var(--progress),
+        var(--slider-track-right-color) var(--progress)
     );
     border-radius: 2px;
     height: 2px;
@@ -327,14 +333,6 @@ input[type="range"]::-moz-range-thumb {
     width: 12px;
 }
 
-[data-framer-styles="prerelease"][data-framer-theme="dark"] input[type="range"]::-webkit-slider-runnable-track {
-    background: linear-gradient(to right, #707070 var(--progress), var(--slider-track-color) var(--progress));
-}
-
-[data-framer-styles="prerelease"][data-framer-theme="dark"] input[type="range"]::-moz-range-track {
-    background: linear-gradient(to right, #707070 var(--progress), var(--slider-track-color) var(--progress));
-}
-
 /* Hide number input stepper buttons in Firefox */
 input[type="number"] {
     -moz-appearance: textfield;

From 61708252df87cbe8b89a7330dfd780224913e66f Mon Sep 17 00:00:00 2001
From: Isaac Roberts <119639439+madebyisaacr@users.noreply.github.com>
Date: Wed, 20 May 2026 10:50:33 -0400
Subject: [PATCH 5/5] Use rgba color

---
 plugins/ascii/src/App.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/ascii/src/App.css b/plugins/ascii/src/App.css
index 05a278ab0..d943c3dda 100644
--- a/plugins/ascii/src/App.css
+++ b/plugins/ascii/src/App.css
@@ -417,7 +417,7 @@ input[type="number"] {
     inset: 0px;
     border-radius: 6px;
     pointer-events: none;
-    box-shadow: inset 0 0 0 1px #ffffff0d;
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
     mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
     -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
 }