Modernise TW Styling#9802
Conversation
…2.4.7)
Two rules suppress the :focus-visible outline that vanilla/base.tid
provides for all interactive elements:
- snowwhite: .tc-edit-tags input.tc-edit-texteditor { outline: none }
- vanilla: .tc-remove-tag-button { outline: none }
These made tag-editing inputs and the tag remove button invisible to
keyboard users. The vanilla theme already defines a proper focus ring
(2px solid primary) via :focus-visible, so these overrides were
actively harmful. Removing them restores keyboard accessibility.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…1.4.3) Three foreground colours in the default palette had contrast ratios well below WCAG AA minimums, making text hard to read for low-vision users: - muted-foreground: #bbbbbb → #949494 (1.9:1 → 3.0:1 on white, passes 3:1 for UI components per WCAG 1.4.11) - sidebar-muted-foreground: #c0c0c0 → #8a8a8a (1.6:1 → 3.1:1 on page-background) - sidebar-tiddler-link-foreground: #999999 → #707070 (2.6:1 → 4.5:1 on page-background, passes AA for normal text) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…ubordinate The subtitle (date/modifier) was #c0c0c0 on white (~1.8:1 contrast), nearly invisible to low-vision users. A simple darkening to pass 4.5:1 made it too visually dominant, competing with the tiddler title. Solution: combine a tinted blue-grey (#8090a0, ~3.4:1) that harmonises with the navy title (#182955) so the eye groups them together, with reduced font-size (0.9em → 0.8em) and font-weight (normal → 300) to push metadata into the background. The tinting prevents the subtitle from reading as independent content while remaining legible. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
…k themes compatible
✅ Deploy Preview for tiddlywiki-previews ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Confirmed: pmario has already signed the Contributor License Agreement (see contributing.md) |
📊 Build Size Comparison:
|
| Branch | Size |
|---|---|
| Base (master) | 2491.8 KB |
| PR | 2540.0 KB |
Diff: ⬆️ Increase: +48.2 KB
⚠️ Change Note Status
This PR appears to contain code changes but doesn't include a change note.
Please add a change note by creating a .tid file in editions/tw5.com/tiddlers/releasenotes/<version>/
📚 Documentation: Release Notes and Changes
💡 Note: If this is a documentation-only change, you can ignore this message.
|
@saqimtiaz ... The changes to the TW CSS to make it look more modern are very subtle. The extra palettes are experiments because I think they are nice. #8702 most likely will have the same contrast problems as the current tw-com has. Values in this draft can be used as a starting point to make it better. tiddlywiki.com currently has problems with dark palettes. See screenshot below. I needed this changes to experiment with possible fixes, that will work with v5.4.0. We probably will need to live with it for the rest of the year. 
|
|
Hi @pmario I like the CSS changes that I've found so far, and would encourage you to go further, particularly with refinements to the appearance of tabs. |
Segmented-control style tabs: pill-shaped container with rounded selected-tab pill. Based on Snow White; registered in tw5.com edition.
GitHub / Primer style: transparent tabs with primary-coloured 2px underline on selected. Based on Snow White; registered in tw5.com edition.
- $:/theme → Rounded Tabs (was Snow White) - $:/palette timestamp refresh - doc-styles: doc-tabs use larger 1.15rem font with snug 0.25em 0.75em padding so the selected pill hugs its text rather than looking puffy - Expose palette and theme buttons in the page control toolbar - tw5.com-server: add wikilabs/devtools plugin
- Container padding 4px → 2px, border-radius 10px → 8px so the pill hugs the buttons more tightly - font-size: 0.95em on the tab-button container so tab labels read closer to body size (replacing vanilla's 0.85em default)
The first tab's left padding toggles between 0 and 8px based on its
selected state (flush-left when unselected; indented when selected),
which previously caused a visible jump on selection change.
Animate the transition:
- 200ms slide-in (left → right) when first tab becomes selected
- 300ms slide-out (right → left) when first tab becomes unselected
- No animation when the first tab's state doesn't change (e.g.
clicking between the 2nd and 3rd tabs)
TW rebuilds all tab buttons on every selection change, so the
animation has to be applied by JS only when the first-tab state
actually flips — a MutationObserver tracks it via a data-attribute.
The JS is an edition tiddler because theme plugins don't load JS
modules at boot.
|
@Jermolene ... I did add 2 experiments for different tab styles 2 new Themes:
Effected are Right Sidebar, Control Panel and Checkbox Widget Example section where the tabs is styled to be bigger. Screenshots follow. Rounded tabs preview: Checkbox Widget - See right sidebar and tiddler body tabs 
Rounded tabs: Control Panel 
Underlined Control Panel 
Underlined tabs: Checkbox widget .doc-tabs macro and right sidebar 
|
Some palettes (IndianGarden, Mediterranee, SpartanDay, SpartanNight, Sunset) define tab-background and tab-border as transparent, assuming vanilla's folder-tab style. Under Rounded Tabs this made the pill container and the selected-pill outline invisible. Layer a low-opacity rgba overlay under the container background and add an inset box-shadow fallback on the selected pill border. Both stack imperceptibly on top of a real palette colour when one is defined, and provide minimum visibility when the palette value is transparent.
Five palettes had tab-foreground and/or very-muted-foreground set too close to their backgrounds, making tab labels and .doc-attr labels hard to read. - IndianGarden: tab-fg #8a9878→#a8b898, very-muted #4a5a3a→#788868 - Mediterranee: tab-fg #788898→#98a8b8, very-muted #3a4450→#687888 - Sunset: tab-fg #907858→#a89070, very-muted #483828→#786040 - SpartanDay: tab-fg 0.54→0.62, very-muted 0.12→0.42 - SpartanNight: tab-fg 0.54→0.70, very-muted 0.12→0.42 Spartan's 0.12 very-muted value was Material Design's divider opacity, never intended for readable text — .doc-attr uses this colour for attribute labels so it needs to be visible.
Version number update for 5.4.0
|
Issues I found:
Tested on the Netlify preview. |
|
Looks like the tab overflows on mobile, IMO it should be wrapped.
|
|
I would encourage one additional improvement. The default borders of If you are happy with this suggestion, consider extending to standard HTML input types too. |
|
@Leilei332 ... can you check wikilabs.github.io .. It uses a plugin version of those themes. On my mobile it works as expected. -- It seems my mobile has a much higher resolution. ... 
|
|
@Leilei332 ... I can replicated it with the FF dev - mobile preview Galyxy S10 settings. -- I will have a closer look |
I can replicate this behaviour. IMO should be completely resolvable with some CSS tweaks. I'll have a closer look - soon |
Add a .tc-tab-buttons.tc-vertical block plus a sidebar+vertical override so vertical tab sets get a modern stacked appearance instead of inheriting vanilla's square bordered slab. Affected: Releases year/version picker and the sidebar More sub-tabs. Selected tile uses the palette's tab-background-selected (or sidebar-tab- background-selected) wrapped in a 1px tab-border outline plus an inset shadow. The border and shadow are necessary because Vanilla defines tab-background-selected as #ffffff, identical to the tiddler bg, so a bg-only treatment would be invisible on light palettes. Unselected buttons carry a 1px transparent border to prevent a 1px layout shift on selection.
Thanks for the feedback hihi, That's really hard for me. I personally hate the "all rounded" and "partially transparent" behaviour that is mainstream at the moment. (For me it did not work for Windows 20 years ago) So adding "more" rounded corners to the tiddlers was OK, since I basically removed the "hard" drop shadows. You are right. ... having rounded borders on input elements is mainstream currently.
So there can be official plugins, with 2 versions. One rounded, one corner-ed ... for those of us who prefer rough edges. I'll have a look. |
|
You make a good point. To be fair, I think the trend isn't necessarily towards rounded - so my bad on explaining it that way. I think it is rather towards thinner borders, which is where many OS's and browsers' thick default bevels fall down. Dimension is coming back (so moving away from flat UIs) but in a layered way & supported by animation. Tiddlywiki already has some dimension actually through toddlers. Of course, these are the things becoming mainstream now; it's hard to predict what the next UI trend will be, but I think layered dimensionality and thin borders are here to stay. |
Without flex-wrap, tab buttons overflowed off-screen on mobile widths (e.g. ControlPanel's Keyboard Shortcuts tab). Add flex-wrap: wrap to both themes; Underlined Tabs uses row-gap: 4px to clear the underline indicator on a wrapped row.
|
@Leilei332 ... The ControlPanel problem should be fixed here now. I did not update my wikilabs-plugins yet |
You are right. I am OK with thin borders, ... but they make it harder for users with "limited" eye sight. ... Or even you wear glasses. The whole accessibility issue is a big thing. The Audit: Palette Test Page allows to switch palettes and see, what happens to the elements below. This Page will be part of my PaletteManager Plugin in the future, to test light, dark and new palettes much faster. We have a big contrast problem in our UI, which I try to tackle from time to time, with "baby step" PRs ... I try to make it much easier to improve contrast settings for as many palettes as possible at the same time ... |
|
On the other hand there is a pending PR from Jeremy, which should be merged into v5.5.0-prerelease as soon as v5.4.1 is released. Hopefully it will help us to improve the accessibility contrast settings ... We will see. |
5 participants
This is Work In Progress - More testing needed. Especially with WCAG contrast values.
Modernise TiddlyWiki default styling
Summary
This PR modernises TiddlyWiki's default visual appearance by:
outline:noneremoval)<<colour>>palette references so all UI elements work across light and dark palettesbutton-background-hoverpalette entry — A new dedicated colour for button hover states, added to all 20 existing palettesChanges by area
Theme CSS (snowwhite + vanilla)
border-radius: 0.25emPalettes
button-background-hoverentry addedtw5.com edition
Files changed
51 files, +1667 / −101 lines
Test plan
prefers-reduced-motion(not yet added — follow-up)