Feat: Automatically assign Tailwind Color to new `tag`
nelsonic opened this issue · 5 comments
Currently the tags are displayed as text links below the item.text in the UI:
But what we want is something more like the GitHub issues interface with the labels as "pills":
We can do a better job of helping people see their tags visually at a glance simply by applying some color 🌈
Thankfully, TailwindCSS has a good set of colors: https://github.com/dwyl/learn-tailwind#colors
Todo
- Add
colortotagsschema so that it is saved in the DB when a new tag is created - List all the tailwind color names
e.g:"red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue" - Create a function that a
{color}-{integer}(the saturation value) e.g."red-300" - Saturation values can be
"300", "400", "500", "600", "700", "800", "900"We don't want to use below
300because it won't be enough contrast. - Font color should be
whitethis maximises contrast and consistency for thetag"pills"
Proposed code for a tag:
<a class="bg-blue-500 text-white font-bold py-1 px-2 rounded-full" href="/link-to-filter-by-tag">
priority-1
</a>@SimonLab thoughts?
I think I have the same issue as describe in tailwindlabs/tailwindcss#6020
I'm creating the background color from elixir values which are passed in the attribute class.
see the following commit: dwyl/mvp@6243b9b
@SimonLab the idea is to create the bg-blue-500 class in Elixir-land ...
but if it looks like we're not going to be able to do this with Tailwind,
we can easily do this with hex values instead.
I'm using the hex value for the colors.
When editing a tag you can change this value, I'm using the color input: https://petal.build/components/forms#color_input
