Skip to content

Commit 155b62e

Browse files
fezcodefezcode
committed
refactor(quote): light workbench + native widgets replacing brutalist ones
Shifts the Workbench palette from warm near-black to a warm cream light mode. #FAF7F0 ground with deep ink text and the same muted terracotta #C4643A accent. The page now exposes the palette as CSS custom properties (--wb-bg, --wb-surface, --wb-ink, --wb-accent, etc.) so embedded widgets can theme themselves without cross-file plumbing. Replaces the brutalist-variant shared widgets (CustomSlider, CustomDropdown, CustomColorPicker) inside the quote generator with three local Workbench-native components: - WbSlider: accent-filled linear track with a bordered circle thumb that scales on hover, live value read-out in tabular nums - WbDropdown: styled native <select> with rounded surface, hover and focus ring states, chevron caret - WbColorPicker: rounded swatch opening the native color picker paired with an editable hex field in JetBrains Mono Also updates the alignment toggle to use Workbench 'wb-icon-btn' styling with an accent-soft active state, replaces the preset buttons with Workbench cards, and adds the four new themes (libretto, chalkboard, tarot, ransom) to the Theme Style dropdown so they are directly selectable. Rewrites the download buttons as rounded JetBrains Mono chips that flip to terracotta on hover. Updates the CanvasPreview container from the old dark bg-[#111] surface to a white Workbench card. Removes the page level CSS overrides that were targeting the old brutalist classes — styling now lives with the widgets.
1 parent cb9a9b4 commit 155b62e

4 files changed

Lines changed: 497 additions & 731 deletions

File tree

‎src/app/QuoteGenerator/QuoteGeneratorApp.jsx‎

Lines changed: 30 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -103,31 +103,20 @@ const QuoteGeneratorApp = () => {
103103

104104
{/* download row */}
105105
<div className="flex flex-wrap items-center justify-between gap-3">
106-
<div className="qg-mono text-[10px] qg-dim" style={{ letterSpacing: '0.1em' }}>
106+
<div className="qg-mono text-[10px]" style={{ letterSpacing: '0.1em', color: 'var(--wb-ink-soft, #6B6A65)' }}>
107107
export as
108108
</div>
109109
<div className="flex items-center gap-2">
110-
<button
111-
onClick={() => setTriggerDownload('png')}
112-
className="flex items-center gap-2 px-4 py-2 border text-xs font-mono uppercase tracking-widest font-bold rounded-sm bg-white/10 text-white border-white/20 hover:bg-white hover:text-black transition-all"
113-
>
114-
<DownloadSimpleIcon weight="bold" size={14} />
115-
<span>PNG</span>
116-
</button>
117-
<button
118-
onClick={() => setTriggerDownload('jpeg')}
119-
className="flex items-center gap-2 px-4 py-2 border text-xs font-mono uppercase tracking-widest font-bold rounded-sm bg-white/10 text-white border-white/20 hover:bg-white hover:text-black transition-all"
120-
>
121-
<DownloadSimpleIcon weight="bold" size={14} />
122-
<span>JPEG</span>
123-
</button>
124-
<button
125-
onClick={() => setTriggerDownload('webp')}
126-
className="flex items-center gap-2 px-4 py-2 border text-xs font-mono uppercase tracking-widest font-bold rounded-sm bg-white/10 text-white border-white/20 hover:bg-white hover:text-black transition-all"
127-
>
128-
<DownloadSimpleIcon weight="bold" size={14} />
129-
<span>WebP</span>
130-
</button>
110+
{['png', 'jpeg', 'webp'].map((fmt) => (
111+
<button
112+
key={fmt}
113+
onClick={() => setTriggerDownload(fmt)}
114+
className="wb-dl-btn"
115+
>
116+
<DownloadSimpleIcon weight="regular" size={13} />
117+
<span>{fmt.toUpperCase()}</span>
118+
</button>
119+
))}
131120
</div>
132121
</div>
133122
</div>
@@ -141,8 +130,25 @@ const QuoteGeneratorApp = () => {
141130
{/* Host-page can restyle labels via these classes */}
142131
<style>{`
143132
.qg-mono { font-family: 'JetBrains Mono', 'Space Mono', monospace; }
144-
.qg-label { color: currentColor; text-transform: lowercase; }
145-
.qg-dim { color: currentColor; opacity: 0.55; text-transform: lowercase; }
133+
.qg-label { color: var(--wb-ink-soft, #6B6A65); text-transform: lowercase; }
134+
.qg-dim { color: var(--wb-ink-dim, #A8A49B); text-transform: lowercase; }
135+
.wb-dl-btn {
136+
display: inline-flex; align-items: center; gap: 6px;
137+
padding: 7px 12px;
138+
font-family: 'JetBrains Mono', monospace;
139+
font-size: 11px; letter-spacing: 0.08em;
140+
background: var(--wb-surface, #FFFFFF);
141+
color: var(--wb-ink, #1A1918);
142+
border: 1px solid var(--wb-hair, rgba(25,23,22,0.08));
143+
border-radius: 8px;
144+
cursor: pointer;
145+
transition: all .15s ease;
146+
}
147+
.wb-dl-btn:hover {
148+
background: var(--wb-accent, #C4643A);
149+
color: var(--wb-bg, #FAF7F0);
150+
border-color: var(--wb-accent, #C4643A);
151+
}
146152
`}</style>
147153
</div>
148154
);

‎src/app/QuoteGenerator/components/CanvasPreview.jsx‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -793,7 +793,14 @@ const CanvasPreview = ({
793793
}, [triggerDownload, onDownload]);
794794

795795
return (
796-
<div className="w-full flex justify-center items-center overflow-hidden bg-[#111] border border-white/10 rounded-lg p-4">
796+
<div
797+
className="w-full flex justify-center items-center overflow-hidden p-4"
798+
style={{
799+
background: 'var(--wb-surface, #FFFFFF)',
800+
border: '1px solid var(--wb-hair, rgba(25,23,22,0.08))',
801+
borderRadius: 14,
802+
}}
803+
>
797804
<canvas
798805
ref={canvasRef}
799806
style={{

0 commit comments

Comments
 (0)