Xeverything11 (talk | contribs)
correct place
Xeverything11 (talk | contribs)
Line 3: Line 3:
== Improved color palette! ==
== Improved color palette! ==


As you may have noticed, skyHow has implemented the new color palette, based on Tailwind v4. It takes advantage of OKLCH colors, which covers the P3 color gamut for supported devices, for brighter and punchier colors. It degrades gracefully to HEX colors in older browsers.
As you may have noticed, skyHow has implemented the new color palette, based on Tailwind v4. It takes advantage of OKLCH colors, which covers the P3 color gamut for supported devices, for brighter, more vivid, and punchier colors. It degrades gracefully to HEX colors in older browsers.


skyHow has also implemented these variables in error, warning, success, info and neutral types.
skyHow has also implemented these variables in error, warning, success, info and neutral types.

Revision as of 19:47, 3 May 2025

This portal is community discussions of interest to the skyHow community in general, as well as general help in skyHow. For requests that require administrator intervention, please use skyHow:Administrators' noticeboard. If you want to request permissions needing community consensus, see skyHow:Requests for permissions.

On the Community portal, you can:

  • Start a community discussion of interest to the skyHow community in general.

If you would like to request:


Improved color palette!

As you may have noticed, skyHow has implemented the new color palette, based on Tailwind v4. It takes advantage of OKLCH colors, which covers the P3 color gamut for supported devices, for brighter, more vivid, and punchier colors. It degrades gracefully to HEX colors in older browsers.

skyHow has also implemented these variables in error, warning, success, info and neutral types.

You can use the variables to set colors for text, backgrounds and borders.

Lightness Error Warning Success Info Neutral (New!)
Lightest color-red-100 color-yellow-100 color-green-100 color-blue-100 color-gray-50
color-rose-100 color-amber-100 color-emerald-100 color-indigo-100 color-stone-50
Lighter color-red-300 color-yellow-300 color-green-300 color-blue-300 color-gray-200
color-rose-300 color-amber-300 color-emerald-300 color-indigo-300 color-stone-200
Light
(Passes WCAG AA on dark backgrounds)
color-red-400 color-yellow-400 color-green-400 color-blue-400 color-gray-400
color-rose-400 color-amber-400 color-emerald-400 color-indigo-400 color-stone-400
Regular
(Passes WCAG AA on light backgrounds)
color-red-600 color-yellow-700 color-green-700 color-blue-600 color-gray-500
color-rose-600 color-amber-700 color-emerald-700 color-indigo-600 color-stone-500
Dark color-red-700 color-yellow-800 color-green-800 color-blue-700 color-gray-600
color-rose-700 color-amber-800 color-emerald-800 color-indigo-700 color-stone-600
Darker color-red-800 color-yellow-900 color-green-900 color-blue-800 color-gray-800
color-rose-800 color-amber-900 color-emerald-900 color-indigo-800 color-stone-800
Darkest color-red-900 color-yellow-950 color-green-950 color-blue-900 color-gray-950
color-rose-900 color-amber-950 color-emerald-950 color-indigo-900 color-stone-950

skyHow hopes that everyone will have a better experience when browsing skyHow.

Let us know if you have any questions.

Xeverything11 (talk) 19:44, 3 May 2025 (UTC)Reply