michaelmannucci/shades
Composer 安装命令：
composer require michaelmannucci/shades
包简介
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.
README 文档
README
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.
composer require michaelmannucci/shades
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:
{{ color | shades:tailwind:name }}
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:
{{ "#ff269e" | shades:tailwind:statamic }}
This will generate the following output:
<style>:root{--statamic-50:#ffe9f5;--statamic-100:#ffd4ec;--statamic-200:#ffa8d8;--statamic-300:#ff7dc5;--statamic-400:#ff51b1;--statamic-500:#ff269e;--statamic-600:#cc1e7e;--statamic-700:#99175f;--statamic-800:#660f3f;--statamic-900:#330820;}</style>
2. In your tailwind.config.js file, add the following:
module.exports = {
theme: {
extend: {
colors: {
'statamic': {
50: 'var(--statamic-50)',
100: 'var(--statamic-100)',
200: 'var(--statamic-200)',
300: 'var(--statamic-300)',
400: 'var(--statamic-400)',
500: 'var(--statamic-500)',
600: 'var(--statamic-600)',
700: 'var(--statamic-700)',
800: 'var(--statamic-800)',
900: 'var(--statamic-900)',
},
}
},
},
}
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:
{{ color | shades:(tint or shade):percentage }}
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:
{{ "#01d0aa" | shades:tint:50 }}
This would return #80e8d5.
Or, if you wanted to generate a 20% darker variant of the Statamic green color, you would do:
{{ "#01d0aa" | shades:shade:20 }}
This would return #01a688
michaelmannucci/shades 适用场景与选型建议
michaelmannucci/shades 是一款 基于 PHP 开发的 Composer 扩展包，目前已累计 678 次下载、GitHub Stars 达 0， 最近一次更新时间为 2022 年 11 月 08 日， 在 PHP 生态内属于活跃度较高的组件。
我们在过去多个企业项目中使用过 michaelmannucci/shades 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。
基于 michaelmannucci/shades 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。
线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。
承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。
统计信息
- 总下载量： 678
- 月度下载量： 0
- 日度下载量： 0
- 收藏数： 0
- 点击次数： 19
- 依赖项目数： 0
- 推荐数： 0
其他信息
- 授权协议： MIT
- 更新时间： 2022-11-08