From f85f3fdac0b134f1d81ef980f2a2405ec4762b01 Mon Sep 17 00:00:00 2001 From: colton123e <50672441+colton123e@users.noreply.github.com> Date: Sun, 14 Sep 2025 16:14:23 -0600 Subject: [PATCH 1/6] feat(theme): add theme picker and dark-first boot; pre-React theme script to avoid light flash --- public/index.html | 53 ++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 52 insertions(+), 1 deletion(-) diff --git a/public/index.html b/public/index.html index cf90eb7..88168ab 100644 --- a/public/index.html +++ b/public/index.html @@ -4,7 +4,11 @@ - + + + + + AF Bullet Shaping Tool + + + + + From da1a8ad9c955724745b4067bc3dedb6783b73033 Mon Sep 17 00:00:00 2001 From: colton123e <50672441+colton123e@users.noreply.github.com> Date: Sun, 14 Sep 2025 16:14:57 -0600 Subject: [PATCH 2/6] feat(theme): add theme picker and dark-first boot; CSS vars, Bulma overrides, highlight + danger colors --- src/styles/index.scss | 263 +++++++++++++++++++++++++++++++----------- 1 file changed, 198 insertions(+), 65 deletions(-) diff --git a/src/styles/index.scss b/src/styles/index.scss index 4c56296..d03934b 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,94 +1,227 @@ @charset "utf-8"; - - // If need, change your variables before importing Bulma // $title-color: #ff0000; @import "bulma/bulma.scss"; -textarea.bullets{ +/* --------------------------- + THEME TOKENS & OVERRIDES +----------------------------*/ +html { color-scheme: dark light; } - height: 200px; - white-space: pre-line; - text-indent: 0px; - overflow: hidden; - border: none; - resize: none; - /*word-break: break-all;*/ -} -.border{ - width:fit-content; - border: solid black 1.1px; -} -.bulletContainer{ - margin:10px 10px 0px 0px; -} -.bullets{ - //font-family: "AdobeTimes"; - font-family: 'Times New Roman'; - font-size: 12pt; - display:inline; - font-kerning:none; - text-rendering: geometricPrecision; +:root { + --bg: #14161A; + --text: #f2f3f5; + --muted: #a3a3a3; + --border: #ffffff26; + --bg-elevated: #14161A; + --logo: #e6e9ff; + --plus-icon: #ff2828; + + /* Highlights & validation (dark) */ + --hl-bg: #e7c64b; + --hl-alt-bg: #58d66e; + --hl-fg: #0b0b0c; + --valid: var(--text); + --invalid: #ff2828; } -input.htCheckboxRendererInput{ - margin: 2px auto!important; - display:block!important; + +/* SYSTEM LIGHT OVERRIDE */ +@media (prefers-color-scheme: light) { + :root { + --bg: #ffffff; + --text: #111111; + --muted: #6b7280; + --border: #1111111c; + --bg-elevated: #ffffff; + --logo: #0F0F0F; + + --hl-bg: #fff3a3; + --hl-alt-bg: #c9f7a8; + --hl-fg: #111111; + --valid: var(--text); + --invalid: #ff2828; + } } -#thesaurus{ - padding: 10px; - margin:10px 10px 0px 0px; - width: unset; + +/* MANUAL OVERRIDES (leave as-is, order after the above so they win) */ +:root[data-theme="light"] { + color-scheme: light; + --bg: #ffffff; + --text: #111111; + --muted: #6b7280; + --border: #1111111c; + --bg-elevated: #ffffff; + --logo: #0F0F0F; + + --hl-bg: #fff3a3; + --hl-alt-bg: #c9f7a8; + --hl-fg: #111111; + --valid: var(--text); + --invalid: #ff2828; } -#thesaurus > ul { - columns:10; - list-style-type:circle; - margin: 5px auto; + +:root[data-theme="dark"] { + color-scheme: dark; + --bg: #14161A; + --text: #f2f3f5; + --muted: #a3a3a3; + --border: #ffffff26; + --bg-elevated: #14161A; + --logo: #e6e9ff; + + --hl-bg: #e7c64b; + --hl-alt-bg: #58d66e; + --hl-fg: #0b0b0c; + --valid: var(--text); + --invalid: #ff2828; } -#thesaurus > ul > li { - margin:auto 5px; +/* --------------------------- + GLOBAL & LAYOUT +----------------------------*/ +html, body, #root { background: var(--bg); min-height: 100%; } +body { color: var(--text); margin: 0; } +::selection { background: var(--hl-bg); color: var(--hl-fg); } + +/* Typography */ +.title { color: var(--text); } +.logo { color: var(--logo); } +h1, h2 { color: var(--text); font-family: monospace; } + +/* Navbar & tabs */ +.navbar { background-color: var(--bg-elevated); } +.navbar-item, .navbar-link { color: var(--text); } + +/* Optional: keep tabs readable across themes */ +.tabs a { color: var(--text); } +.tabs li.is-active a { + color: var(--text); + border-bottom-color: var(--border); } +.tabs ul { border-bottom-color: var(--border);} +/* Generic containers */ +.section, .container, .columns, .column { background: transparent; } -#abbrTable{ - margin:10px 10px 0px 0px; +/* Borders & footer */ +.border { + border: 1.1px solid var(--border); + width: fit-content; } -#bulletIOWrapper{ - min-height:10px; +#footer { + color: var(--muted); + text-align: center; + font-size: 12px; } -.logo{ - color: #0F0F0F; +#footer div { display: block; } + +/* --------------------------- + FORMS & CONTROLS +----------------------------*/ +.input, +.textarea, +.select select { + background: var(--bg-elevated); + color: var(--text); + border-color: var(--border); +} +.input::placeholder, +.textarea::placeholder { color: var(--muted); opacity: 1; } + +/* Output area theming */ +.output-box, +textarea.output-box { + background: var(--bg-elevated); + color: var(--text); /* default/valid */ + border: 1px solid var(--border); +} +.has-text-success { color: var(--valid); } /* valid/OK text */ +.output-box.is-valid { color: var(--valid); } +.output-box.is-invalid, +.has-text-danger, +.is-danger { color: var(--invalid) !important; } +.is-loading { color: var(--muted); } /* loading/working state */ + +.public-DraftEditor-content { + color: var(--text); + caret-color: var(--text); } -h1{ - font-family:monospace; + + +/* --------------------------- + HIGHLIGHTING (duplicates) +----------------------------*/ +/* Preferred highlight classes used by the decorator */ +.dup-highlight { + background: var(--hl-bg); + color: var(--hl-fg); + border-radius: 2px; + padding: 0 .08em; + cursor: pointer; +} +.dup-highlight--alt { + background: var(--hl-alt-bg); } -h2{ - font-family: monospace; + +/* If earlier code injects inline "yellow" styles, force ours */ +.yellow-highlight { + background: var(--hl-bg) !important; + color: var(--hl-fg) !important; + border-radius: 2px; + padding: 0 .08em; + cursor: pointer; } -#topStuff{ - /*position: fixed; - top: 0; - width: 100%; - margin-right:10px;*/ - background-color: white; +/* --------------------------- + PROJECT-SPECIFIC STYLES +----------------------------*/ +textarea.bullets { + height: 200px; + white-space: pre-line; + text-indent: 0px; + overflow: hidden; + border: none; + resize: none; + /* word-break: break-all; */ } -.toolbox{ - display:inherit; +.bulletContainer { margin: 10px 10px 0 0; } + +.bullets { + // font-family: "AdobeTimes"; + font-family: 'Times New Roman'; + font-size: 12pt; + display: inline; + font-kerning: none; + text-rendering: geometricPrecision; } -.toolbox button{ - margin:5px; +input.htCheckboxRendererInput { + margin: 2px auto !important; + display: block !important; } -#footer{ - text-align:center; - font-size:12px; - color:grey; +#thesaurus { + padding: 10px; + margin: 10px 10px 0 0; + width: unset; +} +#thesaurus > ul { + columns: 10; + list-style-type: circle; + margin: 5px auto; } -#footer div{ - display:block -} \ No newline at end of file +#thesaurus > ul > li { margin: auto 5px; } +.thesaurus-plus { color: var(--plus-icon); } +.thesaurus-plus:hover, +.thesaurus-plus:focus { + opacity: 0.9; +} + +#abbrTable { margin: 10px 10px 0 0; } +#bulletIOWrapper { min-height: 10px; } + +.toolbox { display: inherit; } +.toolbox button { margin: 5px; } \ No newline at end of file From 8a449d738af95f2cbf539d3f6ca1abd996f1a05f Mon Sep 17 00:00:00 2001 From: colton123e <50672441+colton123e@users.noreply.github.com> Date: Sun, 14 Sep 2025 16:16:51 -0600 Subject: [PATCH 3/6] feat(theme): add theme picker and dark-first boot; theme-aware output text, uses Bulma helpers --- src/components/Bullets/Bullet.js | 18 +++++++----------- 1 file changed, 7 insertions(+), 11 deletions(-) diff --git a/src/components/Bullets/Bullet.js b/src/components/Bullets/Bullet.js index 7b5e0e4..086af13 100644 --- a/src/components/Bullets/Bullet.js +++ b/src/components/Bullets/Bullet.js @@ -12,7 +12,6 @@ function Bullet({ const canvasRef = useRef(null); const [outputTextLines, setOutputTextLines] = useState(() => [" "]); - const [color, setColor] = useState("inherit"); const [loading, setLoading] = useState(false); const [optimStatus, setOptimStatus] = useState(STATUS.NOT_OPT); const [rendering, setBulletRendering] = useState({ textLines: [""] }); @@ -67,15 +66,12 @@ function Bullet({ }, [rendering, enableOptim, text, widthPxAdjusted]); //color effect - useEffect(() => { - if (loading) { - setColor("silver"); - } else if (optimStatus === STATUS.FAILED_OPT) { - setColor("red"); - } else { - setColor("black"); - } - }, [loading, outputTextLines, optimStatus]); + // choose a theme-aware class for text color + const statusClass = loading + ? "is-loading" + : optimStatus === STATUS.FAILED_OPT + ? "has-text-danger" + : ""; // the style properties help lock the canvas in the same spot and make it essentially invisible. //whitespace: pre-wrap is essential as it allows javascript string line breaks to appear properly. @@ -91,9 +87,9 @@ function Bullet({ }} />
Date: Sun, 14 Sep 2025 16:17:22 -0600 Subject: [PATCH 4/6] feat(theme): add theme picker and dark-first boot; move + icon color to CSS class, remove hardcoded theme control --- src/components/Toolbars/Thesaurus.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Toolbars/Thesaurus.js b/src/components/Toolbars/Thesaurus.js index 4fb7433..3bbb22f 100644 --- a/src/components/Toolbars/Thesaurus.js +++ b/src/components/Toolbars/Thesaurus.js @@ -104,7 +104,7 @@ class SynonymViewer extends PureComponent { return (
-
+
Thesaurus{this.props.word ? ":" : ""} {this.props.word ? header : ""} @@ -125,7 +125,6 @@ class SynonymViewer extends PureComponent { } class SynonymList extends PureComponent { - render() { return (
@@ -141,7 +140,11 @@ class SynonymList extends PureComponent { otherAbbrs={otherAbbrs} /> - + ); From ea21cc0dfd55906b537b60c77c48ff8a8705a86f Mon Sep 17 00:00:00 2001 From: colton123e <50672441+colton123e@users.noreply.github.com> Date: Sun, 14 Sep 2025 17:18:34 -0600 Subject: [PATCH 5/6] updating handling of theme upon loading --- public/index.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/public/index.html b/public/index.html index 88168ab..9678917 100644 --- a/public/index.html +++ b/public/index.html @@ -30,14 +30,14 @@ --> AF Bullet Shaping Tool - + +