Skip to content

ASCII and Dither prerelease styles #650

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
madebyisaacr wants to merge 5 commits into
base: main
Choose a base branch
from
+99 −47
Open

ASCII and Dither prerelease styles #650

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
4e7b2f7
ASCII and Dither prerelease styles
madebyisaacr May 19, 2026
d43c69a
Fix double border
madebyisaacr May 19, 2026
c7ea86f
Segmented control style
madebyisaacr May 19, 2026
e5d0359
Clean up prerelease slider colors
madebyisaacr May 20, 2026
6170825
Use rgba color
madebyisaacr May 20, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 61 additions & 17 deletions plugins/ascii/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -43,17 +49,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);
}
}

Expand Down Expand Up @@ -194,7 +200,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 {
Expand All @@ -212,7 +218,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);
}
}

Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -315,6 +321,25 @@ 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;
}

/* Hide number input stepper buttons in Firefox */
input[type="number"] {
-moz-appearance: textfield;
Expand Down Expand Up @@ -352,10 +377,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;
Expand All @@ -367,13 +396,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 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%);
}
66 changes: 37 additions & 29 deletions plugins/dither/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand All @@ -24,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 {
Expand Down Expand Up @@ -70,14 +74,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);
}
}

Expand Down Expand Up @@ -216,24 +223,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"] {
.canvas-container {
background: unset;
}

.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;
}
Expand Down Expand Up @@ -277,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;
Expand All @@ -305,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;
Expand All @@ -325,6 +314,25 @@ 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;
}

/* Hide number input stepper buttons in Firefox */
input[type="number"] {
-moz-appearance: textfield;
Expand Down
2 changes: 1 addition & 1 deletion plugins/dither/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
} else {
return () => gl.getExtension("WEBGL_lose_context")?.loseContext()
}
}, [])

Check warning on line 65 in plugins/dither/src/App.tsx

View workflow job for this annotation

GitHub Actions / eslint 

React Hook useEffect has a missing dependency: 'gl'. Either include it or remove the dependency array

const [camera] = useState(
() =>
Expand Down Expand Up @@ -117,7 +117,7 @@
useEffect(() => {
if (!program) return
mesh.program = program
}, [program])

Check warning on line 120 in plugins/dither/src/App.tsx

View workflow job for this annotation

GitHub Actions / eslint 

React Hook useEffect has a missing dependency: 'mesh'. Either include it or remove the dependency array

useEffect(() => {
mesh.setParent(scene)
Expand Down Expand Up @@ -146,7 +146,7 @@
assert(bytes)

return bytes
}, [renderer, scene, camera, gl, resolution])

Check warning on line 149 in plugins/dither/src/App.tsx

View workflow job for this annotation

GitHub Actions / eslint 

React Hook useCallback has an unnecessary dependency: 'resolution'. Either exclude it or remove the dependency array

const saveEffect = useCallback(() => {
if (!isAllowedToUpsertImage) return
Expand Down Expand Up @@ -310,7 +310,7 @@
uploadRef.current?.click()
}}
>
<p>Select an Image...</p>
<p>Select an Image…</p>
</div>
)}
</div>
Expand Down
Loading