[BUG] Thicker Button Borders for Some Light Palettes

[kookma]

Describe the bug

Ref: Following a discussion with @Leilei332 on https://github.com/TiddlyWiki/TiddlyWiki5/pull/8733#issuecomment-2466272893

While Vanilla palette the base palette in TiddlyWiki shows thin borders for buttons in the sidebar and so makes buttons looks pretty, some light palettes including the new Flexoki show thick and cluttered buttons.

See below images

Vanilla

FlexokiLight

Solarized

Expected behavior

The button should look like the vanilla. Palettes shall only change the colors NOT the thickness (so if using a color causes that effect, it should be corrected)

To Reproduce

1. Open the https://tiddlywiki.com/prerelease
2. Set palette to FlexokiLight
3. Open the sidebar/tools and look at the button

TiddlyWiki Configuration

-TW 5.3.6-pre -Edge 130/Chrome

Additional context

I think the buttons style in the sidebar need more attentions. This behavior also seen in some dark palettes. For some palettes, the button labels are not readable like Rocker (TW 5.3.6-pre, Edge 130)

[Leilei332]

I had noticed this problem before. This is because the vanilla palette don't have button-* indexes specified, so the browser's defualt style is used (This is what it looks like in Safari on iPad):

When button-* indexes is specified, the buttons will be appled the thick boxed style (the default style when background and border value is specified). IMO it should be changed to be prettier.

[kookma]

Thank you for your feedback.

@Jermolene What do you think? I am with @Leilei332, the thick border should be removed.

[Jermolene]

Hi @kookma @Leilei332 I much, much prefer the OS native appearance for most of the buttons in TW. It makes sense for things like the big download button to have a customised appearance, for example. But equally it makes sense for palettes to have the option of customising the appearance of buttons.

I'd be happy to remove the button- colours from the existing core palettes to fix this. Or perhaps it would make sense to keep custom buttons for one or two of the palettes, if nothing else to demonstrate that the capability exists.

[pmario]

The problem with the prerelease flexoki palette actually is, that it has button- elements defined. See screenshot.

So as soon as one of them is defined we also need to define the border-style. That seems to be true for Edge and FireFox.

The problem is the system default is incredibly ugly.

It seems Safari does it differently. That's why TW does not define button border-styles, since Jeremy never needed it. -- Just a guess.

[kookma]

@Leilei332 Would you mind touching flexoki and solarized as first trail? I would be happy to test on FF/Edge/Chrome on Win 10/11.

[Leilei332]

I think we had better keep it, so that the buttons can use the palette's color. Perhaps we can tweak the stylesheet to normalize the appearance of buttons, for example:

html button {
    border-style: solid;
    border-radius: 4px;
    border-width: 1px;
    padding: 2px 1px;
}

The downside is that the button's appearance won't change when the button active or hovered, so it requires further tweaking.

[pmario]

If the button-border parameter is removed by default the "native" style looks a bit better. So it would be possible to keep the native style.

So users would need to define some custom button-css if they do not like the native look

I personally would prefer, that all 3 colours are removed by default, so the buttons look flat by default

[Leilei332]

For me the problem of using the native style is that it doesn't fit the palette's colors. Like the gray color in the buttons Solar Flare.

On safari on iOS the problem is worse, the buttons in the tiddlers has blue text which doesn't look the same as the palette colors.

[Leilei332]

I've figured out how to make buttons use the palette colors without button-* indexes:

html button {
background: inherit;
color: inherit;
fill: inherit;
border-color: <<colour muted-foreground>>;
border-style: solid;
border-radius: 4px;
border-width: 1px;
padding: 2px 4px;
}

[pmario]

The existing CSS in base.tid is

/*
** Button default styles. Makes them look consistent for all browsers
*/
html button {
    line-height: 1.2;
    color: <<colour button-foreground>>;
    fill: <<colour button-foreground>>;
    background: <<colour button-background>>;
    border-color: <<colour button-border>>;
}

[kookma]

I've figured out how to make buttons use the palette colors without button-* indexes:

This works as expected. Tested on

• Chrome/Edge 130 Windows 11
• All official palettes

Some screenshot

Vanilla

FlexokiLight

FlexokiDark

Solarized Light

@Jermolene I hope this solution can be merged into TW 5.3.6

[Leilei332]

I think this isn't ready right now. We need to implement styles for buttons with pseudo class :active (and :hover) if possible, so that the style of the button will change when the button is clicked or hovered, like the default style.

[Jermolene]

Thanks @Leilei332 @kookma I would welcome a PR for the next release.

[kookma]

I think this isn't ready right now. We need to implement styles for buttons with pseudo class :active (and :hover) if possible, so that the style of the button will change when the button is clicked or hovered, like the default style.

I would be happy to help with test! So as Jeremy stated, this will go for TW 5.3.7 Thank you for all your efforts.