-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Flexoki palettes #8545
base: master
Are you sure you want to change the base?
Add Flexoki palettes #8545
Conversation
Confirmed: Jermolene has already signed the Contributor License Agreement (see contributing.md) |
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. |
IMO |
As suggested by @pmario in #8545 (comment), makes the colours display better in the editor
@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. |
Here is my take for light and testing: You did miss several elements in your original palette |
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? |
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. |
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. |
I also have fixed version of all other core palettes, with the latest elements added. eg: stability badges. |
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. |
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. |
I think the concept is different.
All the "Dark tones" and "Light tones" switch from 400 -> 600 and 600 -> 400 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 :/ |
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. |
Great piece of work! Three small suggestions (may be a little off topic, I can create another ticket):
|
@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 |
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. |
@pmario I notice that your alternative palettes include entries that are not found in original Flexoki palettes (for example, |
|
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. |
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. |
Please see #8550 |
* Add more colors to Flexoki Light palette Add more colors to flexoki light palette, including: * Dirty indicator * Table borders and headings * Tiddler info * Sidebar tabs and buttons * Stability badges * Code blocks * Add more colours * Add message box colors * Add notification colors * Add editor background color * Changed muted background color to fix low-contrast * Add tiddler title color * Add colour for external links
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:
Also see https://github.com/kepano/flexoki
This PR explores adding dark and light Flexoki palettes to TiddlyWiki. Progress: