leoquack/tailwindshades

Tailwind CSS color shades generator

tailwindshades's Issues

Define position of base color

Hey there, really great tool!

It would be very cool if would be able to change the position of base color inside the array.
Like for example if i have a really dark base color, it would make sense for it to be positioned on position 800.

In terms of UX it would be really nice if im able to drag and drop the position of the base color.
Let me know if you are interested in implementing this and i maybe can help.

Saved palette does not save base-stop correctly and wizard does not take base-stop parameter into account either

Hi!

Loving the tool, however I have a minor issue:

When saving a color palette, die base stop always defaults to 5, even if I configured it to be something different before hitting the save button. Also: When loading a palette via an URL like https://www.tailwindshades.com/#color=0%2C0%2C9.411764705882353&step-up=2&step-down=11&hue-shift=0&name=cod-gray&base-stop=9&overrides=e30%3D the base-stop parameter with value 9 is not respected and it jumps back to 5.

Is this a me issue or an actual bug?

Thanks!

move base stop doesn't works in home page

Because I cannot click it to change the value

Add the ability to see and copy JSON snippet

I'd be interested in having the ability to see and copy the color information as a JSON-compatible snippet in addition to the existing JavaScript snippet.

My use case is for tooling around colors that involve reading and consuming something like colors.json in some parts of the application but could also be used to inject as parsed JSON into tailwind.config.js.

Right now I'm doing this in my tailwind.config.js:

const colors = require('../branding/colors.js')

const fs = require('fs');

fs.writeFileSync('../branding/colors.json', JSON.stringify(colors));

module.exports = {
  theme: {
    extend: {
      colors,
    },
  },
}

Which is fine, but it would be nicer if I could maintain colors.json instead of colors.js and not have an extra build step required to get colors.json to exist.

const colors = require('../branding/colors.json')

module.exports = {
  theme: {
    extend: {
      colors,
    },
  },
}

Is this something you'd consider adding or supporting if I sent a PR?

Base color selection CTA does not clear previous color

• Base color selection CTA does not clear previous color

Screen.Recording.2023-06-08.at.13.50.01.mov

Feature request: compare against default palette

It'd be nice for when you're overriding the default color set to be able to compare against the default tw palette for that color

Support for 950 stop

Tailwind CSS has recently added 950 as a stop too: https://tailwindcss.com/blog/tailwindcss-v3-3#extended-color-palette-for-darker-darks

Can we have that here too alongside 900?

Base color not the same

Easier to show with a gif. I entered #285e97 and it converted it to #285d95

What are the reasons 3% is the min/max for steps?

I have several colors for which the color bottoms out at pure black or tops out at pure white by or before -50 or -900. In some cases, I've been able to tweak the colors manually by setting the step up or step down values to 2% or 1%. This works great! Unfortunately, when I save these colors in this state, loading them again overrides the values I manually set to 2% or 1%. This makes it look like the color was never saved and resets the step values to 1%. Since these values are different than the color I actually saved (with 2% or 1% values) it gives me the option to "save" the color again.

An example that goes to white:

https://www.tailwindshades.com/#color=180%2C37.77777777777776%2C91.17647058823529&step-up=3&step-down=3&hue-shift=0&name=aqua-squeeze&base-stop=5&overrides=e30%3D

This screenshot shows what I can see while this link is open:

This screenshot shows what happens when I manually type "1" into the step up field:

I know the UI says it only allows 3%-20%, so one could argue the fact that I can temporarily trick it at all is probably the bug. :) That said, I'm curious what reasons there are for limiting the stepping to 3% at most and whether you'd consider relaxing this restriction.

I think I found the bit of the code that normalizes this value to bottom at 3% and would be happy to send a PR adjusting this to 1%.

tailwindshades/src/components/Shades.vue

Lines 593 to 612 in 8528bb4

	let lookup = parts.find(p => p[0] === 'step-up')
	if (lookup?.length) {
	let stepUp = lookup[1]
	stepUp = this.clamp(parseInt(stepUp), 3, 20)
	this.groupOptions.stepUp = stepUp
	}
	lookup = parts.find(p => p[0] === 'step-down')
	if (lookup?.length) {
	let stepDown = lookup[1]
	stepDown = this.clamp(parseInt(stepDown), 3, 20)
	this.groupOptions.stepDown = stepDown
	}
	lookup = parts.find(p => p[0] === 'hue-shift')
	if (lookup?.length) {
	let hueShift = lookup[1]
	hueShift = this.clamp(parseInt(hueShift), -100, 100)
	this.groupOptions.hueShift = hueShift
	}

I'd probably also include a change to the UI to update to the 1% minimum to match the normalization on the back end.

---

Are you interested in a PR relaxing the 3% minimum? If so, are there other things you feel I should keep in mind?

Thanks for this tool. :)

Possibility to link to a specific shade

Would be very helpful to be able to link to a specific shade "setup". Just need 4 parameters really: The color, the two steps, and the name of the color.

Something like this:

https://www.tailwindshades.com/?color=4B207F&up=15&down=5&name=foobar

Would be really nice when collaborating with others, as well as for documenting where the shade "setup" came from so it's possible to go back and re-adjust.

800 and 900 are essentially black

I really like the tool and it's simplicity, it works well for most colours.
Today I used it with a blue shade of #00659B and it gave me back #000102 and #000000 in the last two positions.
I tested it with a few other darker base colours such as #AA0000 and it gave me the same results: last 2 are black (110000 and 000000). A these are not even particularly dark colours, only a bit darker than the normal base colours.

It might come back to what others suggested: the ability to choose the position of the base colour, in my case probably 600. Or, the algorithm could automatically decide if a colour is too dark for 500 and would adjust the palette accordingly.

Thanks for the tool anyway, I hope it helps.

Specify stops

Would be cool to add stops i.e. 50, 100, 150, 200...

Great tool!

Feature Request: Space separated RGB values

https://tailwindcss.com/docs/customizing-colors#using-css-variables

It would be nice if 3) Get Code had the option to produce CSS variables with space-separated RGB values for use with dynamic opacity (or CSS variable theming in general).

If I get time, I can take a look to make a PR but it's been years since I've done Vue.js.

Feature request: multiple base colors

Some times I get a design from a designer where there is specified eg. 3 shades of a color.

I wan't to have these in the same color group in Tailwind. Usually I use the "middle" color as the base in tailwindshades, and then replace matching colors in the generated colorset with the two others.

But it could be very nice if you could add more base colors, and select which stops they represent. And then tailwindshades would calculate the rest based on your base colors.