Add scaffolding for future/experimental flags, with WIP new color palette as example

[adamwathan]

This PR introduces some scaffolding for some new feature flagging ideas inspired by how it's handled in Next.js.

It introduces two potential top level keys to the Tailwind config:

• future, for enabling features that are stable and will be the default in v2.0, but introduce breaking changes and therefore can't be added in a minor version. An example of this is the new color palette we are working on, or the idea to add default line heights to each font size.
• experimental, for features that we hope will make it in to Tailwind at some point but are still a work in progress and not considered stable. These may change at any time in any release, and can also introduce breaking changes.

Here's what a config might look like (features are just examples):

// tailwind.config.js
module.exports = {
  future: {
    defaultLineHeights: true,
  },
  experimental: {
    uniformColorPalette: true,
    applyVariants: true,
  },
  theme: {
    // ...
  },
  // ...
}

The goal of this is to make it easy for us to do both Tailwind 1.x and Tailwind 2.0 development on a single branch, and also get new features out to early adopters to test out easily without having two separate release streams.

This PR also adds some console logging during the build process to indicate a few things:

• When a future feature is enabled, the console informs you that you have opted-in to a stable breaking change.
• When an experimental feature is enabled, the console warns you that you are using experimental features that could break at any time.
• When a future feature is available but not enabled, Tailwind warns you that your build contains deprecated functionality and encourages you to opt-in to the new breaking changes now to simplify upgrading down the road.

I hope this will make the upgrade process to 2.0 really smooth, at least for people who acknowledge the console warnings. In a perfect world, upgrading from the last 1.x release to 2.0 will involve the end-user literally doing nothing, because 2.0 will just make the opt-in future features the default and remove the deprecation warnings.

This PR also adds our WIP version of the new color palette (taken from Tailwind UI) as an example of an experimental feature. We will be refining this a lot in the next month or so but it's included now for anyone who wants to start playing with it and providing feedback.

[austenc]

Just needs a yolo flag to enable every experimental and future feature at once.

Kidding of course. This is awesome, thanks Adam. Will test soon. 🙌

Edit: Meant to ask... thoughts on when this might make it into a real 1.x release?

[Lelectrolux]

Just needs a yolo flag to enable every experimental and future feature at once.

Kidding of course.

Well, I don't know if the implementation allows it easily, but if it is almost a freebie to do, I'd love that yolo flag.

I often pull tailwind for throwaway interface prototypes and toy projects, and am not concerned about any kind of forward or backward compatibility in those case. Which would make those toy projects the perfect time to learn a new feature/test something new

[estevanmaito]

@adamwathan did you consider implementing telemetry?

I noticed Next.js does this as a way to understand feature usage and I think it could be useful for Tailwind too.

On build/run, it gets anonymous project data like config file content (1), project packages (2) and some system config (3).

1. with config file content data (Next actually only tests the existence of the config file), it is possible to see trending patterns or extensions/modifications that developers are doing, that others could benefit, like a plugin to create colored outlines, common used heights, etc. In this particular scenario, it would be useful to track experimental features adoption too.

2. project packages can help seeing in which contexts Tailwind is used, like (examples) the growth of usage alongside a framework (eg. more people are using with Svelte/React/Angular/Vue), some specific plugin, etc

3. system config, in Next's case, I think is just the package version and Node version, and I don't think more than that would be needed.

Overall, it could help for easier decision making, content (docs, examples) for specific users (discovered in 2.), and more.

Privacy and record uniqueness (you don't want to record data if it didn't change in the same project) are achieved using a one-way hash. I think this is pretty solid to implement it as opt-out (like Next does).

[stnwk]

I was interested in the visual differences between the old and the new color palette and made a quick thing, posting in case it's helpful to someone else :)

Code Sandbox: https://codesandbox.io/s/tailwind-color-palette-comparison-f1igi

[MarcelloTheArcane]

I prefer the old blue 🙂 especially since I have a project entirely based on blue!

Where do we comment on colours?

[austenc]

@MarcelloTheArcane The new colors are underneath an experimental flag until version 2.0. So until then, you have to opt in to them. You could also easily copy the old blue values to your tailwind config file 👍

…

On Thu, Aug 20, 2020, 12:43 AM Max Reynolds ***@***.***> wrote: I prefer the old blue 🙂 especially since I have a project entirely based on blue! Where do we comment on colours? — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#2132 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEMPPOEMU5T42QTUMMFHW3SBTAZ7ANCNFSM4PV3ZCRQ> .

[pspeter3]

I analyzed the new color palette to see if it conforms to the USWDS guidelines https://designsystem.digital.gov/design-tokens/color/overview/#color-and-accessibility. Conforming may be a non goal but I thought you all may be interested.

hue	shade	hex	min	lum	max	valid
blue	50	#ebf5ff	0.85	0.902	0.93	true
blue	100	#e1effe	0.75	0.849	0.82	false
blue	200	#c3ddfd	0.5	0.704	0.65	false
blue	300	#a4cafe	0.35	0.573	0.45	false
blue	400	#76a9fa	0.25	0.391	0.3	false
blue	500	#3f83f8	0.175	0.241	0.183	false
blue	600	#1c64f2	0.1	0.158	0.125	false
blue	700	#1a56db	0.05	0.12	0.07	false
blue	800	#1e429f	0.02	0.067	0.04	false
blue	900	#233876	0.005	0.045	0.015	false
gray	50	#f9fafb	0.85	0.955	0.93	false
gray	100	#f4f5f7	0.75	0.913	0.82	false
gray	200	#e5e7eb	0.5	0.798	0.65	false
gray	300	#d2d6dc	0.35	0.67	0.45	false
gray	400	#9fa6b2	0.25	0.379	0.3	false
gray	500	#6b7280	0.175	0.167	0.183	false
gray	600	#4b5563	0.1	0.089	0.125	false
gray	700	#374151	0.05	0.052	0.07	true
gray	800	#252f3f	0.02	0.028	0.04	true
gray	900	#161e2e	0.005	0.013	0.015	true
green	50	#f3faf7	0.85	0.941	0.93	false
green	100	#def7ec	0.75	0.881	0.82	false
green	200	#bcf0da	0.5	0.781	0.65	false
green	300	#84e1bc	0.35	0.624	0.45	false
green	400	#31c48d	0.25	0.421	0.3	false
green	500	#0e9f6e	0.175	0.26	0.183	false
green	600	#057a55	0.1	0.146	0.125	false
green	700	#046c4e	0.05	0.113	0.07	false
green	800	#03543f	0.02	0.067	0.04	false
green	900	#14737	0.005	0.048	0.015	false
indigo	50	#f0f5ff	0.85	0.911	0.93	true
indigo	100	#e5edff	0.75	0.844	0.82	false
indigo	200	#cddbfe	0.5	0.708	0.65	false
indigo	300	#b4c6fc	0.35	0.571	0.45	false
indigo	400	#8da2fb	0.25	0.385	0.3	false
indigo	500	#6875f5	0.175	0.223	0.183	false
indigo	600	#5850ec	0.1	0.139	0.125	false
indigo	700	#5145cd	0.05	0.104	0.07	false
indigo	800	#42389d	0.02	0.064	0.04	false
indigo	900	#362f78	0.005	0.042	0.015	false
orange	50	#fff8f1	0.85	0.947	0.93	false
orange	100	#feecdc	0.75	0.862	0.82	false
orange	200	#fcd9bd	0.5	0.74	0.65	false
orange	300	#fdba8c	0.35	0.579	0.45	false
orange	400	#ff8a4c	0.25	0.4	0.3	false
orange	500	#ff5a1f	0.175	0.287	0.183	false
orange	600	#d03801	0.1	0.162	0.125	false
orange	700	#b43403	0.05	0.122	0.07	false
orange	800	#8a2c0d	0.02	0.072	0.04	false
orange	900	#73230d	0.005	0.049	0.015	false
pink	50	#fdf2f8	0.85	0.912	0.93	true
pink	100	#fce8f3	0.75	0.849	0.82	false
pink	200	#fad1e8	0.5	0.718	0.65	false
pink	300	#f8b4d9	0.35	0.576	0.45	false
pink	400	#f17eb8	0.25	0.371	0.3	false
pink	500	#e74694	0.175	0.235	0.183	false
pink	600	#d61f69	0.1	0.163	0.125	false
pink	700	#bf125d	0.05	0.123	0.07	false
pink	800	#99154b	0.02	0.078	0.04	false
pink	900	#751a3d	0.005	0.049	0.015	false
purple	50	#f6f5ff	0.85	0.921	0.93	true
purple	100	#edebfe	0.75	0.846	0.82	false
purple	200	#dcd7fe	0.5	0.71	0.65	false
purple	300	#cabffd	0.35	0.569	0.45	false
purple	400	#ac94fa	0.25	0.369	0.3	false
purple	500	#9061f9	0.175	0.213	0.183	false
purple	600	#7e3af2	0.1	0.139	0.125	false
purple	700	#6c2bd9	0.05	0.099	0.07	false
purple	800	#5521b5	0.02	0.064	0.04	false
purple	900	#4a1d96	0.005	0.045	0.015	false
red	50	#fdf2f2	0.85	0.908	0.93	true
red	100	#fde8e8	0.75	0.844	0.82	false
red	200	#fbd5d5	0.5	0.729	0.65	false
red	300	#f8b4b4	0.35	0.559	0.45	false
red	400	#f98080	0.25	0.371	0.3	false
red	500	#f05252	0.175	0.252	0.183	false
red	600	#e02424	0.1	0.172	0.125	false
red	700	#c81e1e	0.05	0.133	0.07	false
red	800	#9b1c1c	0.02	0.079	0.04	false
red	900	#771d1d	0.005	0.049	0.015	false
teal	50	#edfafa	0.85	0.933	0.93	false
teal	100	#d5f5f6	0.75	0.861	0.82	false
teal	200	#afecef	0.5	0.753	0.65	false
teal	300	#7edce2	0.35	0.611	0.45	false
teal	400	#16bdca	0.25	0.408	0.3	false
teal	500	#0694a2	0.175	0.238	0.183	false
teal	600	#047481	0.1	0.141	0.125	false
teal	700	#036672	0.05	0.107	0.07	false
teal	800	#05505c	0.02	0.065	0.04	false
teal	900	#014451	0.005	0.047	0.015	false
yellow	50	#fdfdea	0.85	0.971	0.93	false
yellow	100	#fdf6b2	0.75	0.9	0.82	false
yellow	200	#fce96a	0.5	0.8	0.65	false
yellow	300	#faca15	0.35	0.626	0.45	false
yellow	400	#e3a008	0.25	0.415	0.3	false
yellow	500	#c27803	0.175	0.249	0.183	false
yellow	600	#9f580a	0.1	0.144	0.125	false
yellow	700	#8e4b10	0.05	0.108	0.07	false
yellow	800	#723b13	0.02	0.068	0.04	false
yellow	900	#633112	0.005	0.049	0.015	false

[MarcelloTheArcane]

Nice, but did you base them all on a white background? Some of the lighter ones probably won't be used with that.

[pspeter3]

Thanks! The bounds are based on the colors luminosity value and not contrast ratio so they are background independent.

As an example:

interface Color {
    luminosity(): number;
}

function contrastRatio(foreground: Color, background: Color): number {
    const fl = foreground.luminosity();
    const bl = background.luminosity();
    return (Math.max(fl, bl) + 0.05) / (Math.min(fl, bl) + 0.05);
}

[pspeter3]

The relevant section of the guide is:

Magic number

We call the difference in grade between any two colors the magic number. Magic numbers have important contrast implications:

• A magic number of 40+ results in WCAG 2.0 AA Large Text contrast (example: gray-90 and indigo-warm-50v).
• A magic number of 50+ results in WCAG 2.0 AA contrast or AAA Large Text contrast (example: gray-90 and red-40).
• A magic number of 70+ results in WCAG 2.0 AAA contrast (example: gray-10 and red-80).
• Colors of grade 50 result in Section 508 AA contrast against both pure white (grade 0) and pure black (grade 100).
  Use USWDS magic numbers to choose accessible color combinations from any palette and color family.

USWDS magic number works because each grade conforms to a specific range of values for relative luminance. WCAG and Section 508 color contrast is calculated as a ratio of the relative luminances of two colors, so as long as our colors fall between a specific luminance range for each grade, the ratio will conform to contrast requirements.

The guide also shows this table which I've translated to Tailwind shades:

Shade	Minimum Luminance	Maximum Luminance
White	1.000	1.000
50	0.850	0.930
100	0.750	0.820
200	0.500	0.650
300	0.350	0.450
400	0.250	0.300
500	0.175	0.183
600	0.100	0.125
700	0.050	0.070
800	0.020	0.040
900	0.005	0.015
Black	0.000	0.000

[adamwathan]

What does the valid column mean? I don't really understand how color contrast can be measured without a color to contrast it against.

[pspeter3]

@adamwathan The valid column is whether the luminance for that color falls within the bounds that the USWDS recommends for that shade. As I said, matching those bounds can definitely be a non goal but I thought it would be interesting to share the data. Since luminance is used to calculate contrast ratio, you can use the bounds to set the minimum range between two shades.

[adamwathan]

Sorry I still think I'm missing something, do they recommend a luminance for any color named "100" or "200" for example somewhere?

[pspeter3]

They do have a recommendation. As per the table, a color with a shade of 100 (eg blue-100) should have a luminance between 0.750 and 0.820 and a color with a shade of 200 (eg blue-200) should have a luminance between 0.500 and 0.650.

Sorry for the confusing communication! Happy to answer any questions you may have 😄

[pspeter3]

Also maybe this table helps which shows the minimum contrast ratio between two shades. You can see that the minimum ratio maintains the magic number properties listed above. Eg, that a difference of >400 is at least 3:1, a difference of >500 is at least 4.5:1 and a difference of at least >700 is 7:1.

Shade	0	50	100	200	300	400	500	600	700	800	900	1000
0	1	1.1	1.2	1.5	2.1	3	4.5	6	8.8	11.7	16.2	21
50	1.1	1	1	1.3	1.8	2.6	3.9	5.1	7.5	10	13.8	18
100	1.2	1	1	1.1	1.6	2.3	3.4	4.6	6.7	8.9	12.3	16
200	1.5	1.3	1.1	1	1.1	1.6	2.4	3.1	4.6	6.1	8.5	11
300	2.1	1.8	1.6	1.1	1	1.1	1.7	2.3	3.3	4.4	6.2	8
400	3	2.6	2.3	1.6	1.1	1	1.3	1.7	2.5	3.3	4.6	6
500	4.5	3.9	3.4	2.4	1.7	1.3	1	1.3	1.9	2.5	3.5	4.5
600	6	5.1	4.6	3.1	2.3	1.7	1.3	1	1.3	1.7	2.3	3
700	8.8	7.5	6.7	4.6	3.3	2.5	1.9	1.3	1	1.1	1.5	2
800	11.7	10	8.9	6.1	4.4	3.3	2.5	1.7	1.1	1	1.1	1.4
900	16.2	13.8	12.3	8.5	6.2	4.6	3.5	2.3	1.5	1.1	1	1.1
1000	21	18	16	11	8	6	4.5	3	2	1.4	1.1	1

[adamwathan]

Gotcha, cool! Yeah I don't think fitting into their specific luminance ranges is a goal for us. We will provide documentation on picking WCAG color contrast compliant combinations but it likely won't be identical to the design.gov stuff. Feels unnecessarily robotic to me, the important thing is that people pick combinations with sufficient contrast, not so much that there is a rigid system for doing so.

[pspeter3]

Fair enough and thanks for reading! I think the biggest value is the ability to intuit the contrast ratio while coding and there are many ways to achieve that goal.

[pspeter3]

Here is the minimum contrast between shades for the experimental palette

Shade	0	50	100	200	300	400	500	600	700	800	900	1000
0	1	1.03	1.09	1.24	1.46	2.23	3.12	4.72	5.74	8.15	10.61	21
50	1.03	1	1	1.12	1.32	2.02	2.83	4.28	5.2	7.39	9.62	19.04
100	1.09	1	1	1.05	1.24	1.9	2.66	4.02	4.89	6.94	9.04	17.88
200	1.24	1.12	1.05	1	1.05	1.6	2.24	3.39	4.12	5.85	7.62	15.08
300	1.46	1.32	1.24	1.05	1	1.29	1.81	2.74	3.33	4.73	6.16	12.18
400	2.23	2.02	1.9	1.6	1.29	1	1.24	1.88	2.29	3.25	4.23	8.37
500	3.12	2.83	2.66	2.24	1.81	1.24	1	1.02	1.19	1.69	2.2	4.34
600	4.72	4.28	4.02	3.39	2.74	1.88	1.02	1	1.03	1.08	1.4	2.78
700	5.74	5.2	4.89	4.12	3.33	2.29	1.19	1.03	1	1.11	1.03	2.04
800	8.15	7.39	6.94	5.85	4.73	3.25	1.69	1.08	1.11	1	1.15	1.56
900	10.61	9.62	9.04	7.62	6.16	4.23	2.2	1.4	1.03	1.15	1	1.26
1000	21	19.04	17.88	15.08	12.18	8.37	4.34	2.78	2.04	1.56	1.26	1

[darekkay]

Hey @adamwathan ,

USWDS follows their own guidelines, so not striving for their luminance bounds is totally fine. Still, the "magic number" concept they're using is a really valuable tool in accessible design. I have written a11y-contrast to calculate those values for any palette. Here are the results:

• Tailwind v1

Colors: 90
Magic numbers:
 - Contrast ratio >= 3   : 60 (WCAG AA, large text)
 - Contrast ratio >= 4.5 : 70 (WCAG AA, normal text / WCAG AAA, large text)
 - Contrast ratio >= 7   : 80 (WCAG AAA, normal text)

• Tailwind v2 (proposal)

Colors: 100
Magic numbers:
 - Contrast ratio >= 3   : 50 (WCAG AA, large text)
 - Contrast ratio >= 4.5 : 60 (WCAG AA, normal text / WCAG AAA, large text)
 - Contrast ratio >= 7   : 80 (WCAG AAA, normal text)

The numbers in the v2 proposal are smaller, which is great. This means, there are far more valid color combinations in version 2. Basically every combination with a magic number of 60+ will definitely pass WCAG AA (e.g. red-10 and gray-70).

Just in case you're interested in getting a 50 on the WCAG AA level, here's a list of color combination that do not pass it currently:

Expand

$ bin/a11y-contrast.js examples/tailwind-v2-proposal.json --min-ratio-4.5=50
ℹ Analyzing: examples/tailwind-v2-proposal.json
  Colors: 100
  Magic numbers:
   - Contrast ratio >= 3   : 50 (WCAG AA, large text)
   - Contrast ratio >= 4.5 : 60 (WCAG AA, normal text / WCAG AAA, large text)
   - Contrast ratio >= 7   : 80 (WCAG AAA, normal text)
  Violations (min-ratio-4.5):
   - gray-10 / red-60 (4.328633307455065)
   - gray-40 / red-90 (4.33371277783447)
   - gray-40 / orange-90 (4.339600219958083)
   - gray-40 / yellow-90 (4.332148709917129)
   - gray-40 / green-90 (4.378255802457038)
   - gray-40 / teal-90 (4.402536453804586)
   - gray-40 / purple-90 (4.494032396077233)
   - gray-40 / pink-90 (4.347674522788826)
   - red-5 / red-60 (4.30814441945627)
   - red-5 / pink-60 (4.498382489492557)
   - red-10 / red-60 (4.021423569205248)
   - red-10 / orange-60 (4.209992298247078)
   - red-10 / blue-60 (4.30492795647478)
   - red-10 / pink-60 (4.1990006845751635)
   - red-20 / red-70 (4.256547933232808)
   - red-40 / red-90 (4.26079367601027)
   - red-40 / orange-90 (4.266582055963935)
   - red-40 / yellow-90 (4.259255925117976)
   - red-40 / green-90 (4.304587219180207)
   - red-40 / teal-90 (4.328459324004546)
   - red-40 / blue-90 (4.43838472480992)
   - red-40 / purple-90 (4.418415754483703)
   - red-40 / pink-90 (4.274520500480929)
   - orange-5 / red-60 (4.485689358198201)
   - orange-10 / red-60 (4.10268554521061)
   - orange-10 / orange-60 (4.295064732730901)
   - orange-10 / blue-60 (4.391918781063049)
   - orange-10 / pink-60 (4.283851008597082)
   - orange-20 / red-70 (4.316294089003686)
   - yellow-10 / red-60 (4.272654026601345)
   - yellow-10 / orange-60 (4.473003212795354)
   - yellow-10 / pink-60 (4.461324919870981)
   - green-5 / red-60 (4.458509807564586)
   - green-10 / red-60 (4.187151017997099)
   - green-10 / orange-60 (4.3834908792880505)
   - green-10 / blue-60 (4.482338944196295)
   - green-10 / pink-60 (4.372046288688784)
   - teal-5 / red-60 (4.4196800724112535)
   - teal-10 / red-60 (4.097096856366531)
   - teal-10 / orange-60 (4.289213984460799)
   - teal-10 / blue-60 (4.385936097958203)
   - teal-10 / pink-60 (4.278015535690953)
   - teal-20 / red-70 (4.38959799390212)
   - blue-5 / red-60 (4.280679125205272)
   - blue-5 / orange-60 (4.481404616610143)
   - blue-5 / pink-60 (4.469704388969863)
   - blue-10 / red-60 (4.042750971995763)
   - blue-10 / orange-60 (4.232319765111612)
   - blue-10 / blue-60 (4.327758909477334)
   - blue-10 / pink-60 (4.221269858010003)
   - blue-20 / red-70 (4.1202229322326644)
   - blue-20 / orange-70 (4.3928397761034725)
   - blue-20 / blue-70 (4.43839630205188)
   - blue-20 / pink-70 (4.358956074475011)
   - blue-40 / red-90 (4.462325167866015)
   - blue-40 / orange-90 (4.46838733269081)
   - blue-40 / yellow-90 (4.460714682817836)
   - blue-40 / pink-90 (4.476701258089577)
   - indigo-5 / red-60 (4.319493706664992)
   - indigo-10 / red-60 (4.022517247746528)
   - indigo-10 / orange-60 (4.211137260511388)
   - indigo-10 / blue-60 (4.306098737728415)
   - indigo-10 / pink-60 (4.200142657526907)
   - indigo-20 / red-70 (4.141591226194385)
   - indigo-20 / orange-70 (4.415621915130026)
   - indigo-20 / blue-70 (4.461414706264651)
   - indigo-20 / pink-70 (4.381562485899244)
   - indigo-40 / red-90 (4.395465766945281)
   - indigo-40 / orange-90 (4.401437101834286)
   - indigo-40 / yellow-90 (4.393879411932781)
   - indigo-40 / green-90 (4.440643504816163)
   - indigo-40 / teal-90 (4.465270141898146)
   - indigo-40 / pink-90 (4.409626458975351)
   - purple-5 / red-60 (4.367503470048642)
   - purple-10 / red-60 (4.028388546216917)
   - purple-10 / orange-60 (4.217283870266782)
   - purple-10 / blue-60 (4.312383954018372)
   - purple-10 / pink-60 (4.2062732194715124)
   - purple-20 / red-70 (4.151117672805305)
   - purple-20 / orange-70 (4.425778684383941)
   - purple-20 / blue-70 (4.471676807637571)
   - purple-20 / pink-70 (4.391640911995555)
   - purple-40 / red-90 (4.232075985873463)
   - purple-40 / orange-90 (4.23782535222672)
   - purple-40 / yellow-90 (4.230548599400803)
   - purple-40 / green-90 (4.275574361171315)
   - purple-40 / teal-90 (4.299285568341041)
   - purple-40 / blue-90 (4.408470073473323)
   - purple-40 / purple-90 (4.3886356937294675)
   - purple-40 / pink-90 (4.24571029173804)
   - pink-5 / red-60 (4.324626660393446)
   - pink-10 / red-60 (4.042005550674236)
   - pink-10 / orange-60 (4.231539390209895)
   - pink-10 / blue-60 (4.326960937060061)
   - pink-10 / pink-60 (4.220491520541809)
   - pink-20 / red-70 (4.193673348288754)
   - pink-20 / orange-70 (4.471150079824756)
   - pink-20 / pink-70 (4.43666234001121)
   - pink-40 / red-90 (4.255391928242622)
   - pink-40 / orange-90 (4.261172969805634)
   - pink-40 / yellow-90 (4.2538561268797075)
   - pink-40 / green-90 (4.299129950847134)
   - pink-40 / teal-90 (4.32297179110136)
   - pink-40 / blue-90 (4.432757830714064)
   - pink-40 / purple-90 (4.4128141766432405)
   - pink-40 / pink-90 (4.269101350123745)

This means there are up to 30 colors that need an adjustment to get the "magic number" down to 50. That's 1/3 of the entire palette, so I get it if you don't want to invest the time here. I would still suggest adding an info section with the current magic numbers for version 2, so people get to know at least the 60 rule.

I have written about this topic in my latest blog post, where I've also checked some other popular color palettes.

[pspeter3]

@darekkay I really appreciate you calculating the magic numbers for Tailwind! (And referencing me in your blog post 😄 )