Skip to content

Commit 9374647

Browse files
thecrypticaceRobinMalfait
thecrypticace
and
RobinMalfait
authored
Add drop-shadow-* color support (#17434)
This PR adds support for two things: - New `drop-shadow-{color}` utilities which can be used to control the filder drop shadow color - New `drop-shadow-*/{alpha}` utilities which can be used to control the intensity of the drop shadow Note that drop-shadow-* utilities without a modifier use variables from your theme. If you opt into using drop shadow colors or drop-shadow "intensity" utilities we will inline these values into your CSS when using a drop shadow color or drop shadow intensity utility and as such can't be changed by changing the theme variables on a per-element/tree basis. --------- Co-authored-by: Robin Malfait <[email protected]>
1 parent 55d7a65 commit 9374647

File tree

5 files changed

+351
-13
lines changed

5 files changed

+351
-13
lines changed

‎CHANGELOG.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
2626
- Added new `bg-{position,size}-*` utilities for arbitrary values ([#17432](https://github.com/tailwindlabs/tailwindcss/pull/17432))
2727
- Added new `shadow-*/{alpha}`, `inset-shadow-*/{alpha}`, and `text-shadow-*/{alpha}` utilities to control shadow opacity ([#17398](https://github.com/tailwindlabs/tailwindcss/pull/17398))
2828
- Added new `object-{top,bottom}-{left,right}` utilities ([#17437](https://github.com/tailwindlabs/tailwindcss/pull/17437))
29+
- Added new `drop-shadow-{color}` utilities ([#17434](https://github.com/tailwindlabs/tailwindcss/pull/17434))
30+
- Added new `drop-shadow-*/{alpha}` utilities to control drop shadow opacity ([#17434](https://github.com/tailwindlabs/tailwindcss/pull/17434))
2931

3032
### Fixed
3133

‎packages/tailwindcss/src/__snapshots__/intellisense.test.ts.snap‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3984,8 +3984,74 @@ exports[`getClassList 1`] = `
39843984
"divide-y-4",
39853985
"divide-y-8",
39863986
"divide-y-reverse",
3987+
"drop-shadow-current",
3988+
"drop-shadow-current/0",
3989+
"drop-shadow-current/5",
3990+
"drop-shadow-current/10",
3991+
"drop-shadow-current/15",
3992+
"drop-shadow-current/20",
3993+
"drop-shadow-current/25",
3994+
"drop-shadow-current/30",
3995+
"drop-shadow-current/35",
3996+
"drop-shadow-current/40",
3997+
"drop-shadow-current/45",
3998+
"drop-shadow-current/50",
3999+
"drop-shadow-current/55",
4000+
"drop-shadow-current/60",
4001+
"drop-shadow-current/65",
4002+
"drop-shadow-current/70",
4003+
"drop-shadow-current/75",
4004+
"drop-shadow-current/80",
4005+
"drop-shadow-current/85",
4006+
"drop-shadow-current/90",
4007+
"drop-shadow-current/95",
4008+
"drop-shadow-current/100",
4009+
"drop-shadow-inherit",
4010+
"drop-shadow-inherit/0",
4011+
"drop-shadow-inherit/5",
4012+
"drop-shadow-inherit/10",
4013+
"drop-shadow-inherit/15",
4014+
"drop-shadow-inherit/20",
4015+
"drop-shadow-inherit/25",
4016+
"drop-shadow-inherit/30",
4017+
"drop-shadow-inherit/35",
4018+
"drop-shadow-inherit/40",
4019+
"drop-shadow-inherit/45",
4020+
"drop-shadow-inherit/50",
4021+
"drop-shadow-inherit/55",
4022+
"drop-shadow-inherit/60",
4023+
"drop-shadow-inherit/65",
4024+
"drop-shadow-inherit/70",
4025+
"drop-shadow-inherit/75",
4026+
"drop-shadow-inherit/80",
4027+
"drop-shadow-inherit/85",
4028+
"drop-shadow-inherit/90",
4029+
"drop-shadow-inherit/95",
4030+
"drop-shadow-inherit/100",
39874031
"drop-shadow-none",
39884032
"drop-shadow-sm",
4033+
"drop-shadow-transparent",
4034+
"drop-shadow-transparent/0",
4035+
"drop-shadow-transparent/5",
4036+
"drop-shadow-transparent/10",
4037+
"drop-shadow-transparent/15",
4038+
"drop-shadow-transparent/20",
4039+
"drop-shadow-transparent/25",
4040+
"drop-shadow-transparent/30",
4041+
"drop-shadow-transparent/35",
4042+
"drop-shadow-transparent/40",
4043+
"drop-shadow-transparent/45",
4044+
"drop-shadow-transparent/50",
4045+
"drop-shadow-transparent/55",
4046+
"drop-shadow-transparent/60",
4047+
"drop-shadow-transparent/65",
4048+
"drop-shadow-transparent/70",
4049+
"drop-shadow-transparent/75",
4050+
"drop-shadow-transparent/80",
4051+
"drop-shadow-transparent/85",
4052+
"drop-shadow-transparent/90",
4053+
"drop-shadow-transparent/95",
4054+
"drop-shadow-transparent/100",
39894055
"duration-75",
39904056
"duration-100",
39914057
"duration-150",

‎packages/tailwindcss/src/utilities.test.ts‎

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20362,6 +20362,7 @@ test('filter', async () => {
2036220362
css`
2036320363
@theme {
2036420364
--blur-xl: 24px;
20365+
--color-red-500: #ef4444;
2036520366
--drop-shadow: 0 1px 1px rgb(0 0 0 / 0.05);
2036620367
--drop-shadow-xl: 0 9px 7px rgb(0 0 0 / 0.1);
2036720368
}
@@ -20389,8 +20390,11 @@ test('filter', async () => {
2038920390
'invert-0',
2039020391
'invert-[var(--value)]',
2039120392
'drop-shadow',
20393+
'drop-shadow/25',
2039220394
'drop-shadow-xl',
2039320395
'drop-shadow-[0_0_red]',
20396+
'drop-shadow-red-500',
20397+
'drop-shadow-red-500/50',
2039420398
'saturate-0',
2039520399
'saturate-[1.75]',
2039620400
'saturate-[var(--value)]',
@@ -20414,12 +20418,16 @@ test('filter', async () => {
2041420418
--tw-saturate: initial;
2041520419
--tw-sepia: initial;
2041620420
--tw-drop-shadow: initial;
20421+
--tw-drop-shadow-color: initial;
20422+
--tw-drop-shadow-alpha: 100%;
20423+
--tw-drop-shadow-size: initial;
2041720424
}
2041820425
}
2041920426
}
2042020427

2042120428
:root, :host {
2042220429
--blur-xl: 24px;
20430+
--color-red-500: #ef4444;
2042320431
--drop-shadow: 0 1px 1px #0000000d;
2042420432
--drop-shadow-xl: 0 9px 7px #0000001a;
2042520433
}
@@ -20459,21 +20467,53 @@ test('filter', async () => {
2045920467
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
2046020468
}
2046120469

20470+
.drop-shadow\\/25 {
20471+
--tw-drop-shadow-alpha: 25%;
20472+
--tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, oklab(0% 0 0 / .25)));
20473+
--tw-drop-shadow: drop-shadow(var(--drop-shadow));
20474+
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
20475+
}
20476+
2046220477
.drop-shadow {
20478+
--tw-drop-shadow-size: drop-shadow(0 1px 1px var(--tw-drop-shadow-color, #0000000d));
2046320479
--tw-drop-shadow: drop-shadow(var(--drop-shadow));
2046420480
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
2046520481
}
2046620482

2046720483
.drop-shadow-\\[0_0_red\\] {
20468-
--tw-drop-shadow: drop-shadow(0 0 red);
20484+
--tw-drop-shadow-size: drop-shadow(0 0 var(--tw-drop-shadow-color, red));
20485+
--tw-drop-shadow: var(--tw-drop-shadow-size);
2046920486
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
2047020487
}
2047120488

2047220489
.drop-shadow-xl {
20490+
--tw-drop-shadow-size: drop-shadow(0 9px 7px var(--tw-drop-shadow-color, #0000001a));
2047320491
--tw-drop-shadow: drop-shadow(var(--drop-shadow-xl));
2047420492
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
2047520493
}
2047620494

20495+
.drop-shadow-red-500 {
20496+
--tw-drop-shadow-color: color-mix(in srgb, #ef4444 var(--tw-drop-shadow-alpha), transparent);
20497+
--tw-drop-shadow: var(--tw-drop-shadow-size);
20498+
}
20499+
20500+
@supports (color: color-mix(in lab, red, red)) {
20501+
.drop-shadow-red-500 {
20502+
--tw-drop-shadow-color: color-mix(in oklab, var(--color-red-500) var(--tw-drop-shadow-alpha), transparent);
20503+
}
20504+
}
20505+
20506+
.drop-shadow-red-500\\/50 {
20507+
--tw-drop-shadow-color: color-mix(in srgb, #ef444480 var(--tw-drop-shadow-alpha), transparent);
20508+
--tw-drop-shadow: var(--tw-drop-shadow-size);
20509+
}
20510+
20511+
@supports (color: color-mix(in lab, red, red)) {
20512+
.drop-shadow-red-500\\/50 {
20513+
--tw-drop-shadow-color: color-mix(in oklab, color-mix(in oklab, var(--color-red-500) 50%, transparent) var(--tw-drop-shadow-alpha), transparent);
20514+
}
20515+
}
20516+
2047720517
.grayscale {
2047820518
--tw-grayscale: grayscale(100%);
2047920519
filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
@@ -20619,6 +20659,22 @@ test('filter', async () => {
2061920659
@property --tw-drop-shadow {
2062020660
syntax: "*";
2062120661
inherits: false
20662+
}
20663+
20664+
@property --tw-drop-shadow-color {
20665+
syntax: "*";
20666+
inherits: false
20667+
}
20668+
20669+
@property --tw-drop-shadow-alpha {
20670+
syntax: "<percentage>";
20671+
inherits: false;
20672+
initial-value: 100%;
20673+
}
20674+
20675+
@property --tw-drop-shadow-size {
20676+
syntax: "*";
20677+
inherits: false
2062220678
}"
2062320679
`)
2062420680
expect(
@@ -20650,6 +20706,15 @@ test('filter', async () => {
2065020706
'invert-unknown',
2065120707
'-drop-shadow-xl',
2065220708
'-drop-shadow-[0_0_red]',
20709+
20710+
'drop-shadow/foo',
20711+
'-drop-shadow/foo',
20712+
'-drop-shadow/25',
20713+
'-drop-shadow-red-500',
20714+
'drop-shadow-red-500/foo',
20715+
'-drop-shadow-red-500/foo',
20716+
'-drop-shadow-red-500/50',
20717+
2065320718
'-saturate-0',
2065420719
'saturate--5',
2065520720
'-saturate-[1.75]',

0 commit comments

Comments
 (0)