|
1 | 1 | import plugin from "tailwindcss/plugin";
|
2 |
| -import type { IProvider } from "./provider.interface"; |
| 2 | +import type { IProvider } from "../../declaration/provider.interface"; |
| 3 | +import { Strings } from "../../utils/strings"; |
| 4 | +import { Validates } from "../../utils/validates"; |
3 | 5 |
|
4 | 6 | export type TElevationProviderConstructorParams = {
|
5 |
| - readonly shadowToken?: string |
| 7 | + |
| 8 | + /** |
| 9 | + * @description |
| 10 | + * The shadows are divided into three layers. |
| 11 | + * Normally, keep the default. |
| 12 | + * |
| 13 | + * @example |
| 14 | + * ```typescript |
| 15 | + * const color = provideElevation({ |
| 16 | + * shadowColorCssVariable: { |
| 17 | + * layer1: 'red', |
| 18 | + * layer2: 'green', |
| 19 | + * layer3: 'yellow' |
| 20 | + * } |
| 21 | + * }) |
| 22 | + * ``` |
| 23 | + */ |
| 24 | + readonly shadowColorCssVariable: Partial<{ |
| 25 | + layer1: string |
| 26 | + layer2: string |
| 27 | + layer3: string |
| 28 | + }> |
| 29 | + |
| 30 | + /** |
| 31 | + * @description |
| 32 | + * Variables used to control the internal use of shadow. |
| 33 | + * Note that this option is usually used together with [prefix]. |
| 34 | + * |
| 35 | + * @default 'md-sys-color' |
| 36 | + * |
| 37 | + * @example If the value of prefix is 'your-prefix'. |
| 38 | + * ```css |
| 39 | + * .elevation-1 { |
| 40 | + * box-shadow: var(--md-sys-elevation-level-1, var(--your-prefix-shadow, rgba(0, 0, 0, 0.2)) 0px 2px 1px -1px, var(--your-prefix-shadow, rgba(0, 0, 0, 0.14)) 0px 1px 1px 0px, var(--your-prefix-shadow, rgba(0, 0, 0, 0.12)) 0px 1px 3px 0px); |
| 41 | + * } |
| 42 | + * ``` |
| 43 | + */ |
| 44 | + readonly shadowColorTokenPrefix: string |
| 45 | + |
| 46 | + /** |
| 47 | + * @description |
| 48 | + * For managed or public CSS variables. |
| 49 | + * Note that this option is usually used together with [shadowColorTokenPrefix]. |
| 50 | + * |
| 51 | + * @default 'md-sys-elevation' |
| 52 | + * |
| 53 | + * @example If the value of prefix is 'your-prefix'. |
| 54 | + * ```css |
| 55 | + * .elevation-1 { |
| 56 | + * box-shadow: var(--your-prefix-level-1, var(--md-sys-color-shadow, rgba(0, 0, 0, 0.2)) 0px 2px 1px -1px, var(--md-sys-color-shadow, rgba(0, 0, 0, 0.14)) 0px 1px 1px 0px, var(--md-sys-color-shadow, rgba(0, 0, 0, 0.12)) 0px 1px 3px 0px); |
| 57 | + * } |
| 58 | + * ``` |
| 59 | + */ |
| 60 | + readonly prefix: string |
| 61 | + |
| 62 | + /** |
| 63 | + * @description |
| 64 | + * This option can customize the CSS value corresponding to certain tokens. |
| 65 | + * Note that this option ignores [hardcodeDefaultValue] and [prefix]. |
| 66 | + * |
| 67 | + * @default [] |
| 68 | + * |
| 69 | + * @example |
| 70 | + * ```typescript |
| 71 | + * const color = provideElevation({ |
| 72 | + * customTokens: { |
| 73 | + * // .elevation-1 { box-shadow: red 0px 5px 10px 10px; } |
| 74 | + * 'level1': 'red 0px 5px 10px 10px' |
| 75 | + * }, |
| 76 | + * }) |
| 77 | + * ``` |
| 78 | + */ |
| 79 | + readonly customTokens: IElevation | Record<string, string> |
| 80 | + |
| 81 | + /** |
| 82 | + * @description |
| 83 | + * When set to true, each token contains a default value. |
| 84 | + * |
| 85 | + * @default true |
| 86 | + * |
| 87 | + * @example |
| 88 | + * ```typescript |
| 89 | + * const color = provideElevation({ |
| 90 | + * // .elevation-1 { box-shadow: var(--md-sys-elevation-level-1, var(--md-sys-color-shadow, rgba(0, 0, 0, 0.2)) 0px 2px 1px -1px, var(--md-sys-color-shadow, rgba(0, 0, 0, 0.14)) 0px 1px 1px 0px, var(--md-sys-color-shadow, rgba(0, 0, 0, 0.12)) 0px 1px 3px 0px); } |
| 91 | + * hardcodeDefaultValue: true, |
| 92 | + * |
| 93 | + * // .elevation-1 { box-shadow: var(--md-sys-elevation-level-1, ); } |
| 94 | + * hardcodeDefaultValue: false, |
| 95 | + * }) |
| 96 | + * ``` |
| 97 | + */ |
| 98 | + readonly hardcodeDefaultValue: boolean |
| 99 | + |
| 100 | + /** |
| 101 | + * @description |
| 102 | + * Exclude some unnecessary tokens. |
| 103 | + * |
| 104 | + * @default [] |
| 105 | + * |
| 106 | + * @example |
| 107 | + * ```typescript |
| 108 | + * const color = provideElevation({ |
| 109 | + * excludedTokens: [ |
| 110 | + * // remove .elevation-5 |
| 111 | + * 'level5', |
| 112 | + * ], |
| 113 | + * }) |
| 114 | + * ``` |
| 115 | + */ |
| 116 | + readonly excludedTokens: Array<(keyof IElevation) | {}> |
6 | 117 | }
|
7 | 118 |
|
8 |
| -export class ElevationProvider implements IProvider { |
| 119 | +export interface IElevation { |
| 120 | + levelNone: string |
| 121 | + level1: string |
| 122 | + level2: string |
| 123 | + level3: string |
| 124 | + level4: string |
| 125 | + level5: string |
| 126 | +} |
| 127 | + |
| 128 | +class DefaultElevationTokens implements IElevation { |
| 129 | + levelNone = 'none' |
| 130 | + level1 |
| 131 | + level2 |
| 132 | + level3 |
| 133 | + level4 |
| 134 | + level5 |
9 | 135 |
|
10 |
| - public shadowToken |
| 136 | + constructor(shadowColorCssVariableLayer1: string, shadowColorCssVariableLayer2: string, shadowColorCssVariableLayer3: string) { |
| 137 | + this.level1 = `${shadowColorCssVariableLayer1} 0px 2px 1px -1px, ${shadowColorCssVariableLayer2} 0px 1px 1px 0px, ${shadowColorCssVariableLayer3} 0px 1px 3px 0px` |
| 138 | + this.level2 = `${shadowColorCssVariableLayer1} 0px 3px 3px -2px, ${shadowColorCssVariableLayer2} 0px 3px 4px 0px, ${shadowColorCssVariableLayer3} 0px 1px 8px 0px` |
| 139 | + this.level3 = `${shadowColorCssVariableLayer1} 0px 3px 5px -1px, ${shadowColorCssVariableLayer2} 0px 6px 10px 0px, ${shadowColorCssVariableLayer3} 0px 1px 18px 0px` |
| 140 | + this.level4 = `${shadowColorCssVariableLayer1} 0px 5px 5px -3px, ${shadowColorCssVariableLayer2} 0px 8px 10px 1px, ${shadowColorCssVariableLayer3} 0px 3px 14px 2px` |
| 141 | + this.level5 = `${shadowColorCssVariableLayer1} 0px 7px 8px -4px, ${shadowColorCssVariableLayer2} 0px 12px 17px 2px, ${shadowColorCssVariableLayer3} 0px 5px 22px 4px` |
| 142 | + } |
11 | 143 |
|
12 |
| - constructor(params: TElevationProviderConstructorParams) { |
13 |
| - this.shadowToken = params.shadowToken |
| 144 | + public get defaultTokenRecord() { |
| 145 | + return { |
| 146 | + levelNone: this.levelNone, |
| 147 | + level1: this.level1, |
| 148 | + level2: this.level2, |
| 149 | + level3: this.level3, |
| 150 | + level4: this.level4, |
| 151 | + level5: this.level5, |
| 152 | + } |
| 153 | + } |
| 154 | +} |
| 155 | + |
| 156 | +export class ElevationProvider extends DefaultElevationTokens implements IProvider { |
| 157 | + public prefix |
| 158 | + public hardcodeDefaultValue |
| 159 | + public excludedTokens |
| 160 | + public tokens |
| 161 | + public customTokens |
| 162 | + |
| 163 | + constructor(params: Partial<TElevationProviderConstructorParams>) { |
| 164 | + const shadowColorCssVariableLayer1 = params.shadowColorCssVariable?.layer1 ?? `var(--${params.shadowColorTokenPrefix ?? 'md-sys-color'}-shadow, rgba(0, 0, 0, 0.2))` |
| 165 | + const shadowColorCssVariableLayer2 = params.shadowColorCssVariable?.layer2 ?? `var(--${params.shadowColorTokenPrefix ?? 'md-sys-color'}-shadow, rgba(0, 0, 0, 0.14))` |
| 166 | + const shadowColorCssVariableLayer3 = params.shadowColorCssVariable?.layer3 ?? `var(--${params.shadowColorTokenPrefix ?? 'md-sys-color'}-shadow, rgba(0, 0, 0, 0.12))` |
| 167 | + super(shadowColorCssVariableLayer1, shadowColorCssVariableLayer2, shadowColorCssVariableLayer3) |
| 168 | + |
| 169 | + this.prefix = params.prefix ?? 'md-sys-elevation' |
| 170 | + this.hardcodeDefaultValue = params.hardcodeDefaultValue ?? true |
| 171 | + this.excludedTokens = params.excludedTokens ?? [] |
| 172 | + this.customTokens = params.customTokens ?? {} |
| 173 | + this.tokens = this.validate([this.customTokens as Record<string, string>, this.defaultTokenRecord, this.excludedTokens]) |
| 174 | + } |
| 175 | + |
| 176 | + protected validate(params: Parameters<typeof Validates.validate>) { |
| 177 | + return Validates.validate(...params) |
| 178 | + } |
| 179 | + |
| 180 | + protected transformTokensToCssRuleObject(prefix: string, tokens: Record<string, string>, hardcodeDefaultValue: boolean) { |
| 181 | + const cssPropertyComputed = (name: string, value: string) => !Object.hasOwn(this.customTokens, name) ? `var(--${prefix}-${Strings.toKebabCase(name)}, ${hardcodeDefaultValue ? value : ''})` : `${value}` |
| 182 | + |
| 183 | + return Validates.transformTokenRecordToCssRuleObject( |
| 184 | + tokens, |
| 185 | + (name) => `.${Strings.toKebabCase(name).replace('level', 'elevation')}`, |
| 186 | + (name, value) => ({ |
| 187 | + 'box-shadow': cssPropertyComputed(name, value) |
| 188 | + }) |
| 189 | + ) |
14 | 190 | }
|
15 | 191 |
|
16 | 192 | public getPlugin() {
|
| 193 | + const tokens = this.transformTokensToCssRuleObject(this.prefix, this.tokens, this.hardcodeDefaultValue) |
17 | 194 | return plugin(({ addUtilities }) => {
|
18 |
| - addUtilities({ |
19 |
| - '.elevation-none': { |
20 |
| - 'box-shadow': `none`, |
21 |
| - }, |
22 |
| - '.elevation-1': { |
23 |
| - 'box-shadow': `rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.14)) 0px 1px 1px 0px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.12)) 0px 1px 3px 0px`, |
24 |
| - }, |
25 |
| - '.elevation-2': { |
26 |
| - 'box-shadow': `rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.14)) 0px 3px 4px 0px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.12)) 0px 1px 8px 0px`, |
27 |
| - }, |
28 |
| - '.elevation-3': { |
29 |
| - 'box-shadow': `rgba(0, 0, 0, 0.2) 0px 3px 5px -1px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.14)) 0px 6px 10px 0px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.12)) 0px 1px 18px 0px`, |
30 |
| - }, |
31 |
| - '.elevation-4': { |
32 |
| - 'box-shadow': `rgba(0, 0, 0, 0.2) 0px 5px 5px -3px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.14)) 0px 8px 10px 1px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.12)) 0px 3px 14px 2px`, |
33 |
| - }, |
34 |
| - '.elevation-5': { |
35 |
| - 'box-shadow': `rgba(0, 0, 0, 0.2) 0px 7px 8px -4px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.14)) 0px 12px 17px 2px, var(--${this.shadowToken}-shadow, rgba(0, 0, 0, 0.12)) 0px 5px 22px 4px`, |
36 |
| - }, |
37 |
| - }) |
| 195 | + addUtilities(tokens) |
38 | 196 | })
|
39 | 197 | }
|
40 | 198 | }
|
0 commit comments