Add Flexoki palettes

[Jermolene]

The Flexoki palette is a popular colour system for applications and websites. It was developed by Steph Ango (the CEO of Obsidian). From the website https://stephango.com/flexoki:

Flexoki is an inky color scheme for prose and code. Flexoki is designed for reading and writing on digital screens. It is inspired by analog printing inks and warm shades of paper.
Flexoki is minimalistic and high-contrast. The colors are calibrated for legibility and perceptual balance across devices and when switching between light and dark modes.

Also see https://github.com/kepano/flexoki

This PR explores adding dark and light Flexoki palettes to TiddlyWiki. Progress:

• Light palette
• Basic page/tiddler/tabs backgrounds and link colours
• Everything else
• Dark palette

[github-actions]

Confirmed: Jermolene has already signed the Contributor License Agreement (see contributing.md)

[Jermolene]

Here's the light Flexoki palette in TiddlyWiki:

[pmario]

That's very funny. Depending on the monitor I view your screenshots, the tiddler background either looks yellow-ish or pink-ish.

I think it's very similar to solarized-light, but it feels more readable (better contrast for standard text) than solarized.

[pmario]

IMO flexoki-50 should be flexoki-050 for better sorting in the palette-manager edition

[pmario]

[pmario]

@Jermolene -- I did create a full "light" palette with all elements. -- Now I'll only need to test if it as simple as changing names as outlined at the blog post.

flexiko_palette_2024-08-22 14_20_49.zip

[pmario]

Here is my take for light and testing:

You did miss several elements in your original palette

[Jermolene]

Hi @pmario do you mean that you had already started work on a Flexoki palette? I can't download the ZIP right now, what is in it?

[pmario]

I did also test most of the important element for accessibility contrast as described at: https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast

I think also need to change some of the originals. -- There are colour combinations which do not meet WCAG requirements there too. But with very minimal changes AA can be reached.

[pmario]

The ZIP contains a light palette with a different file name, that is cloned from your initial version. And also your version with the missing settings.

flexoki_palette_2024-08-22 14_20_49.zip

If they are imported into the palette-manager edtion: https://wikilabs.github.io/editions/palette-manager/ you can see the difference between yours and mine.

[pmario]

I also have fixed version of all other core palettes, with the latest elements added. eg: stability badges.

[Jermolene]

Hi @pmario it would be good to be able to automate the WCAG tests.

In terms of your modifications, I have been trying to avoid using the base colours directly in the palette, but instead relying on the mappings established in the second block of the palette. The hope is then that the dark mode version will only differ in that middle block.

[pmario]

It's the "simple" names that have to be use in the palette. Switching the mapping to dark should be trivial, for most of our elements.

[Jermolene]

It's the "simple" names that have to be use in the palette. Switching the mapping to dark should be trivial, for most of our elements.

I am reading it that the only Flexoki names that should be used within the main block of the palette are those listed in the section "Mappings", because those are the only ones that change with dark/light mode.

[pmario]

I am reading it that the only Flexoki names that should be used within the main block of the palette are those listed in the section "Mappings", because those are the only ones that change with dark/light mode

I think the concept is different.

• Base tones have a mapping to Light-theme eg: base-paper -> bg
• If it is switched to Dark-theme only map black to bg and tx to base-200

All the "Dark tones" and "Light tones" switch from 400 -> 600 and 600 -> 400
All the names can stay the same

The Mappings info is only an information, what he used for Syntax highlighting and a hint which UI elements use which variable.

But TW has much more variables.

---

BTW the dark theme is almost finished. There are only some hickups, where I did not assign any Flexoki names to the light theme.

The dark theme is really dark :/

[pmario]

Here is the first go on the dark palette: IMO it's a bit too dark for my taste. But the basics seem to be OK.

Mapping the Flexoki names to our names will need some more time, but then creating a dark-theme from a light-theme should be fast.

flexoki-dark-only_palette_2024-08-22 199_01_49.zip

[kookma]

Great piece of work! Three small suggestions (may be a little off topic, I can create another ticket):

1. Is it possible to ship these new palettes like themes (they have separate tiddlers as plugin or so)? Official themes can be added to a TiddlyWiki on demand, no overhead, no obligation to have them when you don't need them.

2. Is it possible, when create a palette and ship it with TiddlyWiki, compile it to the final color values? I mean to have always a hex color value or similar instead of <<colour ....>> as value. This is backward compatible. The developer when create a palette can use any wikitext for color value, but what is shipped is the rendered tiddler in which all wikitext are rendered to a color value.

3. Having item 2, e.g. all colors value as hex or similar values, one can simply extend them and use in his/her development environment as there are many tools out there to work with color value! One simple case is to change the alpha value.

[pmario]

@kookma -- I think your post should be a new issue. Basically it is a feature request, to "compile" palette values. Once there is a new issue I'll comment there

[pmario]

WIP - Work in Progress - The latest Palette Manager Edition now allows you to preview the "Flexoki-Light WL" and "Flexoki-Dark WL" palettes. The Flexoki - Light palette is selected atm.

https://wikilabs.github.io/editions/palette-manager/

[Jermolene]

@pmario I notice that your alternative palettes include entries that are not found in original Flexoki palettes (for example, flexoki-999). I assume that these changes are needed to resolve issues with the application of the palette to TiddlyWiki, but it would be useful to have some commentary on the intention of those changes.

[pmario]

flexoki-999 I did not like "Black", because it is not black. and 1000 creates a sorting problem in the palette manager. Or we would need to use base-0050 ... but then base-1000 would be the only one with no 0-prefix. So I decided to go with 999, which sorts nicely.

[pmario]

There is one other thing. The dark palette IMO is too dark for me. I would probably need to create some different mappings for a cloned "muted" version. But I'm not sure, what happens with the accessibility contrasts then.

[Jermolene]

flexoki-999 I did not like "Black", because it is not black. and 1000 creates a sorting problem in the palette manager. Or we would need to use base-0050 ... but then base-1000 would be the only one with no 0-prefix. So I decided to go with 999, which sorts nicely.

OK but one of the foundational aspects of the design of Flexoki is that it intentionally doesn't use #000 for black (there is a lot of good advice to this effect). I would say that it is no longer Flexoki if you change that.

[kookma]

I think your post should be a new issue.

Please see #8550