Custom step labels

[dnlzro]

I'm wondering if there's any interest in having custom labels for the steps in a type or space scale. For example, Tailwind uses "base" to denote step 0, "lg" to denote step 1, etc. I'd be happy to submit a PR to make the labels customizable.

For example, we could add a new parameter to the calculateTypeScale and calculateSpaceScale like this:

labels: {
  positive: ["base", "lg", "xl"],
  negative: ["sm", "xs"],
}

In this case, steps that are greater than than "xl" would follow the pattern "<n - 1>xl", and steps that are smaller than "xs" would follow the pattern "<-1 * (n + 1)>xs".

We could also just hardcode some options instead (e.g. Tailwind style, Utopia style, numeric style, etc.).

[trys]

Great shout - I've been thinking the same thing recently. I really like the idea of an array of defaults, perhaps with an additional transform function where the details of the step are provided and you return a custom string?

[dnlzro]

Allowing a user-defined transform function would be great 👍

[ghosh]

Something like this would be super cool!

How about starting with these three default scales? It should cover most of the popular ones out there:

Scale
utopia	-N	-3	-2	-1	0	1	2	3	N
tailwind	Nxs	2xs	xs	sm	base	lg	xl	2xl	Nxl
tshirt	Nxs	2xs	xs	s	m	l	xl	2xl	Nxl

An example of how it could be configured

type UtopiaTypeConfig = {
  ...,
  stepScale?: "utopia" | "tailwind" | "tshirt"; // defaults to "utopia"
}

@dnlzro 🖐️ I am happy to give the PR a go, incase you cannot get to it

[dnlzro]

Something like this would be super cool!

How about starting with these three default scales? It should cover most of the popular ones out there: Scale
utopia -N -3 -2 -1 0 1 2 3 N tailwind Nxs 2xs xs sm base lg xl 2xl Nxl tshirt Nxs 2xs xs s m l xl 2xl Nxl

An example of how it could be configured

type UtopiaTypeConfig = {
  ...,
  stepScale?: "utopia" | "tailwind" | "tshirt"; // defaults to "utopia"
}

@dnlzro 🖐️ I am happy to give the PR a go, incase you cannot get to it

Looks good to me! I'll be busy for the next couple of weeks so feel free to start working on it.