search

klembot / chapbook

A simple, readable story format for Twine 2.
https://klembot.github.io/chapbook
MIT License
80 stars 25 forks source link

Unable to set page border color using passage variables or backstage config menu #130

Closed jonstapleton closed 7 months ago

jonstapleton commented 2 years ago

Describe the bug Setting the config.style.page.style.borderColor variable to a color value after setting the config.style.page.style variable to either 'thick-line' or 'thin-line' does not change the color of the border around the page. It instead remains the default color 'gray-2'.

To Reproduce You can reproduce this bug by creating a passage like the one below and running it:

config.style.page.style: 'thick-line'
config.style.page.style.borderColor: 'blue-5'
--
Lorem ipsum dolor sit amet.

If you run the passage, you will see despite the fact that the variable values appear as written in the "backstage" view, the value of the borderColor variable in the passage above seems to have no effect on the appearance of the page border.

You can also reproduce this bug by running a blank passage in "backstage" view, clicking the "Show Defaults" checkbox, and changing the config.style.page.style.borderColor variable manually from its default 'gray-2' to another OpenColor value. After changing the value, the "backstage" config list shows the new borderColor value, but the actual page border color remains unchanged from its default.

Inspecting the page element in either of these situations shows that the border's color remains the default hsla(209.99999999999986, 15.789473684210542%, 92.54901960784314%, 1); value.

Expected behavior When the user sets the config.style.page.style.borderColor variable to a correctly formatted color value (either in a passage or in the "backstage" config menu), the page border should change to that color in the rendered output webpage. When you inspect the page, the CSS border color attribute for the page element should match the value specified in the passage markup.

Stories and screenshots Here is the output generated by the passage above. As you can see, the value provided in the markup appears in the "backstage" config menu, but the rendered border color does not match the value.

border-color-set-bug

Here's what it should look like:

border-color-expected-output

(I got the page to display this by manually editing the element style using Chrome's "developer tools")

If you render a passage like this one, with no borderColor value:

config.style.page.style: 'thick-line'
--
Lorem ipsum dolor sit amet

...you can see config.style.page.style.borderColor in the "backstage" config menu is set to 'gray-2' by default.

border-background-default

However, manually changing this value from the "backstage" menu has no effect:

border-color-backstage-bug

Environment I encountered this error on Windows 11 using the most recent version of Chrome and the Twine online editor. I have reproduced it using the most recent version of Microsoft Edge and the most recent version of Firefox.

Additional context It also appears that the guide has a mistake; it identified the relevant style variable as config.style.page.borderColor when it should be config.style.page.style.borderColor (based on the config variable of that name visible in the "backstage" menu). Neither name works to change the page border color.

klembot commented 7 months ago

Fixed in version 2.0.0 but going to add updated documentation around this. The issue here was accidentally overlapping config keys; it's now config.style.page.style.border and config.style.page.style.borderColor.