Download the PHP package michaelmannucci/shades without Composer
On this page you can find all versions of the php package michaelmannucci/shades. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Download michaelmannucci/shades
More information about michaelmannucci/shades
Files in michaelmannucci/shades
Package shades
Short Description A modifier that generates color shades from a given hex color. It can be used with the color fieldtype or with manual input. It can be used generate Tailwind CSS color palettes or to manually generate individual shades and tints.
License MIT
FAQ
Example:
In general, it is recommended to use always a project to download your libraries. In an application normally there is more than one library needed.
- Some hosting areas are not accessible by a terminal or SSH. Then it is not possible to use Composer.
- To use Composer is sometimes complicated. Especially for beginners.
- Composer needs much resources. Sometimes they are not available on a simple webspace.
- If you are using private repositories you don't need to share your credentials. You can set up everything on our site and then you provide a simple download link to your team member.
- Simplify your Composer build process. Use our own command line tool to download the vendor folder as binary. This makes your build process faster and you don't need to expose your credentials for private repositories.
Informations about the package shades
Statamic Modifier: Shades
What is it
A modifier that generates color shades from a given hex color. It can be used with the color fieldtype or with manual input. It can be used generate Tailwind CSS color palettes or to manually generate individual shades and tints.
How to install it
Install via composer or the Control Panel.
How to use it
Shades can be used in two ways: automatically generate Tailwind CSS color palettes, or manually generate tints and/or shades.
Tailwind CSS palette
You can also automatically generate 10 Tailwind CSS shades and tints to use with Tailwind CSS (eg. bg-yourcolor-500, text-yourcolor-200, etc.). This works by utilizing CSS :root and connecting it to your tailwind.config.js file.
The formula is:
colorwould be the color you want to modify. You can use a color fieldtype, or enter one manually (eg.#ff269e.)shadesis the name of the modifiertailwindlets the modifier know that you intend to use it to generate a Tailwind CSS palette, instead of generating shades or tints manuallynameis what you want the custom Tailwind palette to be named (eg.brand,magenta, etc.) so that it can be used in your templates (eg.text-brand-500,bg-magenta-200, etc.)
For example, if you wanted to use a Statamic pink palette named statamic in your templates, you would:
1. Put the following in your layout.antlers.html file, right under the <body> tag:
This will generate the following output:
2. In your tailwind.config.js file, add the following:
You can now use this color palette in all Tailwind CSS color utilities (eg. border-statamic-400, bg-statamic-900, etc.).
Note: By default, the original color (in this case #ff269e) would be statamic-500.
Manual generation
The formula for manual generation of a tint or shade is:
colorwould be the color you want to modify. You can use a color fieldtype, or enter one manually (eg.#01d0aa.)shadesis the name of the modifiertintorshadelets the modifier know whether you want to make a brighter tint, or a darkers shadepercentageis the degree to which you want to modify the original color
For example, if you wanted to generate a 50% brighter tint of the Statamic green color, you would do:
This would return #80e8d5.
Or, if you wanted to generate a 20% darker variant of the Statamic green color, you would do:
This would return #01a688
