Skip to content

Commit fa6a9df

Browse files
csabaxyzcsabaxyz
authored
fix(preset-wind4): align shadows with tailwind (#4725)
1 parent aa2a140 commit fa6a9df

File tree

4 files changed

+18
-14
lines changed

4 files changed

+18
-14
lines changed

‎packages-presets/preset-wind4/src/rules/shadow.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,17 +33,17 @@ function handleShadow(themeKey: 'shadow' | 'insetShadow') {
3333
const { theme } = ctx
3434
const v = theme[themeKey]?.[d || 'DEFAULT']
3535
const c = d ? h.bracket.cssvar(d) : undefined
36-
const colorVar = hyphenate(themeKey)
36+
const shadowVar = hyphenate(themeKey)
3737

3838
if ((v != null || c != null) && !hasParseableColor(c, theme)) {
3939
return [
4040
{
41-
'--un-shadow': colorableShadows((v || c)!, `--un-${colorVar}-color`).join(','),
41+
[`--un-${shadowVar}`]: colorableShadows((v || c)!, `--un-${shadowVar}-color`).join(','),
4242
'box-shadow': 'var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow)',
4343
},
4444
...Object.values(shadowProperties),
4545
]
4646
}
47-
return colorResolver(`--un-${colorVar}-color`, colorVar)(match, ctx)
47+
return colorResolver(`--un-${shadowVar}-color`, shadowVar)(match, ctx)
4848
}
4949
}

‎packages-presets/preset-wind4/src/theme/misc.ts‎

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -39,17 +39,19 @@ export const shadow = {
3939
'xl': [`0 20px 25px -5px rgb(0 0 0 / 0.1)`, `0 8px 10px -6px rgb(0 0 0 / 0.1)`],
4040
'2xl': `0 25px 50px -12px rgb(0 0 0 / 0.25)`,
4141
'none': '0 0 rgb(0 0 0 / 0)',
42+
/* @deprecated see: https://github.com/tailwindlabs/tailwindcss/blob/bea843c90ab77b47622200daafb918f7044d9f88/packages/tailwindcss/theme.css#L458 */
4243
'inner': 'inset 0 2px 4px 0 rgb(0 0 0 / 0.05)',
4344
} satisfies Theme['shadow']
4445

4546
export const insetShadow = {
46-
'DEFAULT': 'inset 0 1px 1px rgb(0 0 0 / 0.05)',
4747
'2xs': 'inset 0 1px rgb(0 0 0 / 0.05)',
4848
'xs': 'inset 0 1px 1px rgb(0 0 0 / 0.05)',
4949
'sm': 'inset 0 2px 4px rgb(0 0 0 / 0.05)',
50+
'none': '0 0 rgb(0 0 0 / 0)',
5051
} satisfies Theme['insetShadow']
5152

5253
export const dropShadow = {
54+
/* @deprecated see: https://github.com/tailwindlabs/tailwindcss/blob/bea843c90ab77b47622200daafb918f7044d9f88/packages/tailwindcss/theme.css#L459 */
5355
'DEFAULT': ['0 1px 2px rgb(0 0 0 / 0.1)', '0 1px 1px rgb(0 0 0 / 0.06)'],
5456
'xs': '0 1px 1px rgb(0 0 0 / 0.05)',
5557
'sm': '0 1px 2px rgb(0 0 0 / 0.15)',
@@ -60,12 +62,12 @@ export const dropShadow = {
6062
} satisfies Theme['dropShadow']
6163

6264
export const textShadow = {
63-
DEFAULT: ['0 0 1px rgb(0 0 0 / 0.2)', '0 0 1px rgb(1 0 5 / 0.1)'],
64-
none: '0 0 rgb(0 0 0 / 0)',
65-
sm: '1px 1px 3px rgb(36 37 47 / 0.25)',
66-
md: ['0 1px 2px rgb(30 29 39 / 0.19)', '1px 2px 4px rgb(54 64 147 / 0.18)'],
67-
lg: ['3px 3px 6px rgb(0 0 0 / 0.26)', '0 0 5px rgb(15 3 86 / 0.22)'],
68-
xl: ['1px 1px 3px rgb(0 0 0 / 0.29)', '2px 4px 7px rgb(73 64 125 / 0.35)'],
65+
'none': '0 0 rgb(0 0 0 / 0)',
66+
'2xs': '0 1px 0 rgb(0 0 0 / 0.15)',
67+
'xs': '0 1px 1px rgb(0 0 0 / 0.2)',
68+
'sm': ['0 1px 0 rgb(0 0 0 / 0.075)', '0 1px 1px rgb(0 0 0 / 0.075)', '0 2px 2px rgb(0 0 0 / 0.075)'],
69+
'md': ['0 1px 1px rgb(0 0 0 / 0.1)', '0 1px 2px rgb(0 0 0 / 0.1)', '0 2px 4px rgb(0 0 0 / 0.1)'],
70+
'lg': ['0 1px 2px rgb(0 0 0 / 0.1)', '0 3px 2px rgb(0 0 0 / 0.1)', '0 4px 8px rgb(0 0 0 / 0.1)'],
6971
} satisfies Theme['textShadow']
7072

7173
export const perspective = {

‎test/assets/output/preset-wind4-targets.css‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -360,15 +360,13 @@
360360
.text-stroke-blue-500{-webkit-text-stroke-color:color-mix(in oklch, var(--colors-blue-500) var(--un-text-stroke-opacity), transparent) /* oklch(62.3% 0.214 259.815) */;}
361361
.text-stroke-op-\$opacity-variable{--un-text-stroke-opacity:var(--opacity-variable);}
362362
.text-stroke-op-60{--un-text-stroke-opacity:60%;}
363-
.text-shadow{--un-text-shadow:0 0 1px var(--un-text-shadow-color, rgb(0 0 0 / 0.2)),0 0 1px var(--un-text-shadow-color, rgb(1 0 5 / 0.1));text-shadow:var(--un-text-shadow);}
364363
.text-shadow-\$var{--un-text-shadow-color:color-mix(in oklch, var(--var) var(--un-text-shadow-opacity), transparent) /* var(--var) */;}
365-
.text-shadow-lg{--un-text-shadow:3px 3px 6px var(--un-text-shadow-color, rgb(0 0 0 / 0.26)),0 0 5px var(--un-text-shadow-color, rgb(15 3 86 / 0.22));text-shadow:var(--un-text-shadow);}
364+
.text-shadow-lg{--un-text-shadow:0 1px 2px var(--un-text-shadow-color, rgb(0 0 0 / 0.1)),0 3px 2px var(--un-text-shadow-color, rgb(0 0 0 / 0.1)),0 4px 8px var(--un-text-shadow-color, rgb(0 0 0 / 0.1));text-shadow:var(--un-text-shadow);}
366365
.text-shadow-none{--un-text-shadow:0 0 var(--un-text-shadow-color, rgb(0 0 0 / 0));text-shadow:var(--un-text-shadow);}
367366
.text-shadow-color-op-50,
368367
.text-shadow-op-50{--un-text-shadow-opacity:50%;}
369368
.text-shadow-color-sky-300,
370369
.text-shadow-sky-300{--un-text-shadow-color:color-mix(in oklch, var(--colors-sky-300) var(--un-text-shadow-opacity), transparent) /* oklch(82.8% 0.111 230.318) */;}
371-
.text-shadow-xl{--un-text-shadow:1px 1px 3px var(--un-text-shadow-color, rgb(0 0 0 / 0.29)),2px 4px 7px var(--un-text-shadow-color, rgb(73 64 125 / 0.35));text-shadow:var(--un-text-shadow);}
372370
.text-shadow-color-red-300{--un-text-shadow-color:color-mix(in oklch, var(--colors-red-300) var(--un-text-shadow-opacity), transparent) /* oklch(80.8% 0.114 19.571) */;}
373371
.text-shadow-color-op-\$opacity-variable{--un-text-shadow-opacity:var(--opacity-variable);}
374372
.text-shadow-color-op-30{--un-text-shadow-opacity:30%;}
@@ -1017,6 +1015,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
10171015
.shadow-\[0px_4px_4px_0px_rgba\(237\,_0\,_0\,_1\)\]{--un-shadow:0px 4px 4px 0px var(--un-shadow-color, rgba(237, 0, 0, 1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
10181016
.shadow-\[0px_4px_4px_0px_rgba\(238_0_0\/1\)\]{--un-shadow:0px 4px 4px 0px var(--un-shadow-color, rgba(238, 0, 0, 1));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
10191017
.shadow-\$variable{--un-shadow:var(--variable);box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
1018+
.shadow-2xs{--un-shadow:0 1px var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
10201019
.shadow-current{--un-shadow-color:currentColor;}
10211020
.backdrop\:shadow-green::backdrop{--un-shadow-color:color-mix(in oklch, var(--colors-green-DEFAULT) var(--un-shadow-opacity), transparent) /* oklch(79.2% 0.209 151.711) */;}
10221021
.shadow-green-500{--un-shadow-color:color-mix(in oklch, var(--colors-green-500) var(--un-shadow-opacity), transparent) /* oklch(72.3% 0.219 149.579) */;}
@@ -1027,6 +1026,7 @@ unocss .scope-\[unocss\]\:block{display:block;}
10271026
.backdrop-element\:shadow-green-100::backdrop{--un-shadow-color:color-mix(in oklch, var(--colors-green-100) var(--un-shadow-opacity), transparent) /* oklch(96.2% 0.044 156.743) */;}
10281027
.shadow-op-\$opacity-variable{--un-shadow-opacity:var(--opacity-variable);}
10291028
.shadow-op-50{--un-shadow-opacity:50%;}
1029+
.inset-shadow-none{--un-inset-shadow:0 0 var(--un-inset-shadow-color, rgb(0 0 0 / 0));box-shadow:var(--un-inset-shadow), var(--un-inset-ring-shadow), var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);}
10301030
.origin-top-left{transform-origin:top left;}
10311031
.perspect-\$variable{perspective:var(--variable);}
10321032
.perspect-100{perspective:100px;}

‎test/assets/preset-wind4-targets.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -284,6 +284,8 @@ export const presetWind4Targets: string[] = [
284284
'scroll-p-inline-none',
285285

286286
// shadow, spacing
287+
'shadow-2xs',
288+
'inset-shadow-none',
287289
'mix-blend-normal',
288290
'mix-blend-hard-light',
289291
'mix-blend-plus-lighter',
@@ -382,7 +384,7 @@ export const presetWind4Targets: string[] = [
382384
'object-$fit',
383385

384386
// text-shadow
385-
'text-shadow-xl',
387+
'text-shadow-lg',
386388
'text-shadow-sky-300',
387389
'text-shadow-color-sky-300',
388390
'text-shadow-op-50',

0 commit comments

Comments
 (0)