mirror of
https://github.com/aphrody-labs/tailwindcss.git
synced 2026-10-17 12:45:52 +00:00
Preserve shadow color when overriding shadow size (#14458)
This PR changes how shadow color and shadow size utilities interact when used with variants. Take this HTML: ```html <div class="shadow-lg shadow-red-500 hover:shadow-xl"> <!-- … --> </div> ``` Currently this shadow would be red by default, but revert to the default semi-transparent black color on hover. This PR changes this behavior such that the shadow remains red on hover, and only the shadow size changes. We deliberately didn't do this originally because making things behave this way makes it very difficult to get the default shadow color back once you've changed it. The default color for `shadow-xl` for instance is `rgb(0 0 0 / 0.1)`, and the only way to get that color back after changing it is to know that value and explicitly bring it back: ```html <div class="shadow-lg shadow-red-500 hover:shadow-xl hover:shadow-black/10"> <!-- … --> </div> ``` To make things more difficult, the default shadow color is not the same across shadow sizes. For `shadow-sm` it's `black/5`, and for `shadow-2xl` it's `black/25`. In practice though you basically never need to bring back the default shadow color, so I'm reconsidering this trade-off in v4, and think I prefer this new behavior where the color is preserved but you have to bring back the default color if you actually need it. A simple workaround if you don't know the color is to reset the `--tw-shadow-color` variable like this: ```html <div class="shadow-lg shadow-red-500 hover:shadow-xl hover:[--tw-shadow-color:initial]"> <!-- … --> </div> ``` This relies on semi-private internals though, so perhaps we can introduce a utility for this, like `shadow-default` or `shadow-initial` that just unsets the shadow color. --------- Co-authored-by: Adam Wathan <4323180+adamwathan@users.noreply.github.com>
This commit is contained in:
Adam WathanandAdam Wathan authored and GitHub committed
1 parent
67d1849f34
commit
8d00534823
7 files changed
+176
-148
No files matched your search
+2
-1
@@ -27,8 +27,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
### Changed
|
||||
|
||||
- Don't override explicit `leading-*`, `tracking-*`, or `font-{weight}` utilities with font-size utility defaults ([#14403](https://github.com/tailwindlabs/tailwindcss/pull/14403))
|
||||
- Preserve explicit `leading-*`, `tracking-*`, and `font-{weight}` value when overriding font-size ([#14403](https://github.com/tailwindlabs/tailwindcss/pull/14403))
|
||||
- Disallow negative bare values in core utilities and variants ([#14453](https://github.com/tailwindlabs/tailwindcss/pull/14453))
|
||||
- Preserve explicit shadow color when overriding shadow size ([#14458](https://github.com/tailwindlabs/tailwindcss/pull/14458))
|
||||
|
||||
## [4.0.0-alpha.24] - 2024-09-11
|
||||
|
||||
|
||||
@@ -414,8 +414,7 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
|
||||
}
|
||||
|
||||
.shadow {
|
||||
--tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
|
||||
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||||
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
@@ -429,9 +428,9 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
|
||||
@layer base {
|
||||
*, :before, :after, ::backdrop {
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-shadow-color: initial;
|
||||
--tw-inset-shadow: 0 0 #0000;
|
||||
--tw-inset-shadow-colored: 0 0 #0000;
|
||||
--tw-inset-shadow-color: initial;
|
||||
--tw-ring-color: initial;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-inset-ring-color: initial;
|
||||
@@ -481,10 +480,9 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
|
||||
@property --tw-shadow-colored {
|
||||
@property --tw-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
inherits: false
|
||||
}
|
||||
|
||||
@property --tw-inset-shadow {
|
||||
@@ -493,10 +491,9 @@ exports[`compiling CSS > \`@tailwind utilities\` is replaced by utilities using
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
|
||||
@property --tw-inset-shadow-colored {
|
||||
@property --tw-inset-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
inherits: false
|
||||
}
|
||||
|
||||
@property --tw-ring-color {
|
||||
|
||||
@@ -14103,104 +14103,87 @@ test('shadow', async () => {
|
||||
}
|
||||
|
||||
.shadow {
|
||||
--tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
|
||||
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
|
||||
--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-\\[--value\\] {
|
||||
--tw-shadow: var(--value);
|
||||
--tw-shadow-colored: var(--value);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-\\[10px_10px\\] {
|
||||
--tw-shadow: 10px 10px;
|
||||
--tw-shadow-colored: 10px 10px var(--tw-shadow-color);
|
||||
--tw-shadow: 10px 10px var(--tw-shadow-color, currentcolor);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-\\[12px_12px_\\#0088cc\\] {
|
||||
--tw-shadow: 12px 12px #08c;
|
||||
--tw-shadow-colored: 12px 12px var(--tw-shadow-color);
|
||||
--tw-shadow: 12px 12px var(--tw-shadow-color, #08c);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-\\[shadow\\:--value\\] {
|
||||
--tw-shadow: var(--value);
|
||||
--tw-shadow-colored: var(--value);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-none {
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-xl {
|
||||
--tw-shadow: 0 20px 25px -5px #0000001a, 0 8px 10px -6px #0000001a;
|
||||
--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);
|
||||
--tw-shadow: 0 20px 25px -5px var(--tw-shadow-color, #0000001a), 0 8px 10px -6px var(--tw-shadow-color, #0000001a);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.shadow-\\[\\#0088cc\\] {
|
||||
--tw-shadow-color: #08c;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.shadow-\\[\\#0088cc\\]\\/50, .shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
|
||||
--tw-shadow-color: #0088cc80;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.shadow-\\[color\\:--value\\] {
|
||||
--tw-shadow-color: var(--value);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.shadow-\\[color\\:--value\\]\\/50, .shadow-\\[color\\:--value\\]\\/\\[0\\.5\\], .shadow-\\[color\\:--value\\]\\/\\[50\\%\\] {
|
||||
--tw-shadow-color: color-mix(in srgb, var(--value) 50%, transparent);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.shadow-current {
|
||||
--tw-shadow-color: currentColor;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.shadow-current\\/50, .shadow-current\\/\\[0\\.5\\], .shadow-current\\/\\[50\\%\\] {
|
||||
--tw-shadow-color: color-mix(in srgb, currentColor 50%, transparent);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.shadow-inherit {
|
||||
--tw-shadow-color: inherit;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.shadow-red-500 {
|
||||
--tw-shadow-color: var(--color-red-500, #ef4444);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.shadow-red-500\\/50, .shadow-red-500\\/\\[0\\.5\\], .shadow-red-500\\/\\[50\\%\\] {
|
||||
--tw-shadow-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
.shadow-transparent {
|
||||
--tw-shadow-color: transparent;
|
||||
--tw-shadow: var(--tw-shadow-colored);
|
||||
}
|
||||
|
||||
@supports (-moz-orient: inline) {
|
||||
@layer base {
|
||||
*, :before, :after, ::backdrop {
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-shadow-color: initial;
|
||||
--tw-inset-shadow: 0 0 #0000;
|
||||
--tw-inset-shadow-colored: 0 0 #0000;
|
||||
--tw-inset-shadow-color: initial;
|
||||
--tw-ring-color: initial;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-inset-ring-color: initial;
|
||||
@@ -14219,10 +14202,9 @@ test('shadow', async () => {
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
|
||||
@property --tw-shadow-colored {
|
||||
@property --tw-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
inherits: false
|
||||
}
|
||||
|
||||
@property --tw-inset-shadow {
|
||||
@@ -14231,10 +14213,9 @@ test('shadow', async () => {
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
|
||||
@property --tw-inset-shadow-colored {
|
||||
@property --tw-inset-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
inherits: false
|
||||
}
|
||||
|
||||
@property --tw-ring-color {
|
||||
@@ -14355,104 +14336,87 @@ test('inset-shadow', async () => {
|
||||
}
|
||||
|
||||
.inset-shadow {
|
||||
--tw-inset-shadow: inset 0 2px 4px #0000000d;
|
||||
--tw-inset-shadow-colored: inset 0 2px 4px var(--tw-inset-shadow-color);
|
||||
--tw-inset-shadow: inset 0 2px 4px var(--tw-inset-shadow-color, #0000000d);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.inset-shadow-\\[--value\\] {
|
||||
--tw-inset-shadow: inset var(--value);
|
||||
--tw-inset-shadow-colored: inset var(--value);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.inset-shadow-\\[10px_10px\\] {
|
||||
--tw-inset-shadow: inset 10px 10px;
|
||||
--tw-inset-shadow-colored: inset 10px 10px var(--tw-inset-shadow-color);
|
||||
--tw-inset-shadow: inset 10px 10px var(--tw-inset-shadow-color, currentcolor);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.inset-shadow-\\[12px_12px_\\#0088cc\\] {
|
||||
--tw-inset-shadow: inset 12px 12px #08c;
|
||||
--tw-inset-shadow-colored: inset 12px 12px var(--tw-inset-shadow-color);
|
||||
--tw-inset-shadow: inset 12px 12px var(--tw-inset-shadow-color, #08c);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.inset-shadow-\\[shadow\\:--value\\] {
|
||||
--tw-inset-shadow: inset var(--value);
|
||||
--tw-inset-shadow-colored: inset var(--value);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.inset-shadow-none {
|
||||
--tw-inset-shadow: 0 0 #0000;
|
||||
--tw-inset-shadow-colored: 0 0 #0000;
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.inset-shadow-sm {
|
||||
--tw-inset-shadow: inset 0 1px 1px #0000000d;
|
||||
--tw-inset-shadow-colored: inset 0 1px 1px var(--tw-inset-shadow-color);
|
||||
--tw-inset-shadow: inset 0 1px 1px var(--tw-inset-shadow-color, #0000000d);
|
||||
box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
|
||||
}
|
||||
|
||||
.inset-shadow-\\[\\#0088cc\\] {
|
||||
--tw-inset-shadow-color: #08c;
|
||||
--tw-inset-shadow: var(--tw-inset-shadow-colored);
|
||||
}
|
||||
|
||||
.inset-shadow-\\[\\#0088cc\\]\\/50, .inset-shadow-\\[\\#0088cc\\]\\/\\[0\\.5\\], .inset-shadow-\\[\\#0088cc\\]\\/\\[50\\%\\] {
|
||||
--tw-inset-shadow-color: #0088cc80;
|
||||
--tw-inset-shadow: var(--tw-inset-shadow-colored);
|
||||
}
|
||||
|
||||
.inset-shadow-\\[color\\:--value\\] {
|
||||
--tw-inset-shadow-color: var(--value);
|
||||
--tw-inset-shadow: var(--tw-inset-shadow-colored);
|
||||
}
|
||||
|
||||
.inset-shadow-\\[color\\:--value\\]\\/50, .inset-shadow-\\[color\\:--value\\]\\/\\[0\\.5\\], .inset-shadow-\\[color\\:--value\\]\\/\\[50\\%\\] {
|
||||
--tw-inset-shadow-color: color-mix(in srgb, var(--value) 50%, transparent);
|
||||
--tw-inset-shadow: var(--tw-inset-shadow-colored);
|
||||
}
|
||||
|
||||
.inset-shadow-current {
|
||||
--tw-inset-shadow-color: currentColor;
|
||||
--tw-inset-shadow: var(--tw-inset-shadow-colored);
|
||||
}
|
||||
|
||||
.inset-shadow-current\\/50, .inset-shadow-current\\/\\[0\\.5\\], .inset-shadow-current\\/\\[50\\%\\] {
|
||||
--tw-inset-shadow-color: color-mix(in srgb, currentColor 50%, transparent);
|
||||
--tw-inset-shadow: var(--tw-inset-shadow-colored);
|
||||
}
|
||||
|
||||
.inset-shadow-inherit {
|
||||
--tw-inset-shadow-color: inherit;
|
||||
--tw-inset-shadow: var(--tw-inset-shadow-colored);
|
||||
}
|
||||
|
||||
.inset-shadow-red-500 {
|
||||
--tw-inset-shadow-color: var(--color-red-500, #ef4444);
|
||||
--tw-inset-shadow: var(--tw-inset-shadow-colored);
|
||||
}
|
||||
|
||||
.inset-shadow-red-500\\/50, .inset-shadow-red-500\\/\\[0\\.5\\], .inset-shadow-red-500\\/\\[50\\%\\] {
|
||||
--tw-inset-shadow-color: color-mix(in srgb, var(--color-red-500, #ef4444) 50%, transparent);
|
||||
--tw-inset-shadow: var(--tw-inset-shadow-colored);
|
||||
}
|
||||
|
||||
.inset-shadow-transparent {
|
||||
--tw-inset-shadow-color: transparent;
|
||||
--tw-inset-shadow: var(--tw-inset-shadow-colored);
|
||||
}
|
||||
|
||||
@supports (-moz-orient: inline) {
|
||||
@layer base {
|
||||
*, :before, :after, ::backdrop {
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-shadow-color: initial;
|
||||
--tw-inset-shadow: 0 0 #0000;
|
||||
--tw-inset-shadow-colored: 0 0 #0000;
|
||||
--tw-inset-shadow-color: initial;
|
||||
--tw-ring-color: initial;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-inset-ring-color: initial;
|
||||
@@ -14471,10 +14435,9 @@ test('inset-shadow', async () => {
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
|
||||
@property --tw-shadow-colored {
|
||||
@property --tw-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
inherits: false
|
||||
}
|
||||
|
||||
@property --tw-inset-shadow {
|
||||
@@ -14483,10 +14446,9 @@ test('inset-shadow', async () => {
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
|
||||
@property --tw-inset-shadow-colored {
|
||||
@property --tw-inset-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
inherits: false
|
||||
}
|
||||
|
||||
@property --tw-ring-color {
|
||||
@@ -14698,9 +14660,9 @@ test('ring', async () => {
|
||||
@layer base {
|
||||
*, :before, :after, ::backdrop {
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-shadow-color: initial;
|
||||
--tw-inset-shadow: 0 0 #0000;
|
||||
--tw-inset-shadow-colored: 0 0 #0000;
|
||||
--tw-inset-shadow-color: initial;
|
||||
--tw-ring-color: initial;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-inset-ring-color: initial;
|
||||
@@ -14719,10 +14681,9 @@ test('ring', async () => {
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
|
||||
@property --tw-shadow-colored {
|
||||
@property --tw-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
inherits: false
|
||||
}
|
||||
|
||||
@property --tw-inset-shadow {
|
||||
@@ -14731,10 +14692,9 @@ test('ring', async () => {
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
|
||||
@property --tw-inset-shadow-colored {
|
||||
@property --tw-inset-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
inherits: false
|
||||
}
|
||||
|
||||
@property --tw-ring-color {
|
||||
@@ -14959,9 +14919,9 @@ test('inset-ring', async () => {
|
||||
@layer base {
|
||||
*, :before, :after, ::backdrop {
|
||||
--tw-shadow: 0 0 #0000;
|
||||
--tw-shadow-colored: 0 0 #0000;
|
||||
--tw-shadow-color: initial;
|
||||
--tw-inset-shadow: 0 0 #0000;
|
||||
--tw-inset-shadow-colored: 0 0 #0000;
|
||||
--tw-inset-shadow-color: initial;
|
||||
--tw-ring-color: initial;
|
||||
--tw-ring-shadow: 0 0 #0000;
|
||||
--tw-inset-ring-color: initial;
|
||||
@@ -14980,10 +14940,9 @@ test('inset-ring', async () => {
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
|
||||
@property --tw-shadow-colored {
|
||||
@property --tw-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
inherits: false
|
||||
}
|
||||
|
||||
@property --tw-inset-shadow {
|
||||
@@ -14992,10 +14951,9 @@ test('inset-ring', async () => {
|
||||
initial-value: 0 0 #0000;
|
||||
}
|
||||
|
||||
@property --tw-inset-shadow-colored {
|
||||
@property --tw-inset-shadow-color {
|
||||
syntax: "*";
|
||||
inherits: false;
|
||||
initial-value: 0 0 #0000;
|
||||
inherits: false
|
||||
}
|
||||
|
||||
@property --tw-ring-color {
|
||||
|
||||
@@ -4197,9 +4197,9 @@ export function createUtilities(theme: Theme) {
|
||||
let boxShadowProperties = () => {
|
||||
return atRoot([
|
||||
property('--tw-shadow', nullShadow),
|
||||
property('--tw-shadow-colored', nullShadow),
|
||||
property('--tw-shadow-color'),
|
||||
property('--tw-inset-shadow', nullShadow),
|
||||
property('--tw-inset-shadow-colored', nullShadow),
|
||||
property('--tw-inset-shadow-color'),
|
||||
property('--tw-ring-color'),
|
||||
property('--tw-ring-shadow', nullShadow),
|
||||
property('--tw-inset-ring-color'),
|
||||
@@ -4222,8 +4222,10 @@ export function createUtilities(theme: Theme) {
|
||||
|
||||
return [
|
||||
boxShadowProperties(),
|
||||
decl('--tw-shadow', value),
|
||||
decl('--tw-shadow-colored', replaceShadowColors(value, 'var(--tw-shadow-color)')),
|
||||
decl(
|
||||
'--tw-shadow',
|
||||
replaceShadowColors(value, (color) => `var(--tw-shadow-color, ${color})`),
|
||||
),
|
||||
decl('box-shadow', cssBoxShadowValue),
|
||||
]
|
||||
}
|
||||
@@ -4237,17 +4239,15 @@ export function createUtilities(theme: Theme) {
|
||||
value = asColor(value, candidate.modifier)
|
||||
if (value === null) return
|
||||
|
||||
return [
|
||||
boxShadowProperties(),
|
||||
decl('--tw-shadow-color', value),
|
||||
decl('--tw-shadow', 'var(--tw-shadow-colored)'),
|
||||
]
|
||||
return [boxShadowProperties(), decl('--tw-shadow-color', value)]
|
||||
}
|
||||
default: {
|
||||
return [
|
||||
boxShadowProperties(),
|
||||
decl('--tw-shadow', value),
|
||||
decl('--tw-shadow-colored', replaceShadowColors(value, 'var(--tw-shadow-color)')),
|
||||
decl(
|
||||
'--tw-shadow',
|
||||
replaceShadowColors(value, (color) => `var(--tw-shadow-color, ${color})`),
|
||||
),
|
||||
decl('box-shadow', cssBoxShadowValue),
|
||||
]
|
||||
}
|
||||
@@ -4260,7 +4260,6 @@ export function createUtilities(theme: Theme) {
|
||||
return [
|
||||
boxShadowProperties(),
|
||||
decl('--tw-shadow', nullShadow),
|
||||
decl('--tw-shadow-colored', nullShadow),
|
||||
decl('box-shadow', cssBoxShadowValue),
|
||||
]
|
||||
}
|
||||
@@ -4272,8 +4271,10 @@ export function createUtilities(theme: Theme) {
|
||||
if (candidate.modifier) return
|
||||
return [
|
||||
boxShadowProperties(),
|
||||
decl('--tw-shadow', value),
|
||||
decl('--tw-shadow-colored', replaceShadowColors(value, 'var(--tw-shadow-color)')),
|
||||
decl(
|
||||
'--tw-shadow',
|
||||
replaceShadowColors(value, (color) => `var(--tw-shadow-color, ${color})`),
|
||||
),
|
||||
decl('box-shadow', cssBoxShadowValue),
|
||||
]
|
||||
}
|
||||
@@ -4283,11 +4284,7 @@ export function createUtilities(theme: Theme) {
|
||||
{
|
||||
let value = resolveThemeColor(candidate, theme, ['--box-shadow-color', '--color'])
|
||||
if (value) {
|
||||
return [
|
||||
boxShadowProperties(),
|
||||
decl('--tw-shadow-color', value),
|
||||
decl('--tw-shadow', 'var(--tw-shadow-colored)'),
|
||||
]
|
||||
return [boxShadowProperties(), decl('--tw-shadow-color', value)]
|
||||
}
|
||||
}
|
||||
})
|
||||
@@ -4314,10 +4311,9 @@ export function createUtilities(theme: Theme) {
|
||||
|
||||
return [
|
||||
boxShadowProperties(),
|
||||
decl('--tw-inset-shadow', value),
|
||||
decl(
|
||||
'--tw-inset-shadow-colored',
|
||||
replaceShadowColors(value, 'var(--tw-inset-shadow-color)'),
|
||||
'--tw-inset-shadow',
|
||||
replaceShadowColors(value, (color) => `var(--tw-inset-shadow-color, ${color})`),
|
||||
),
|
||||
decl('box-shadow', cssBoxShadowValue),
|
||||
]
|
||||
@@ -4332,19 +4328,14 @@ export function createUtilities(theme: Theme) {
|
||||
value = asColor(value, candidate.modifier)
|
||||
if (value === null) return
|
||||
|
||||
return [
|
||||
boxShadowProperties(),
|
||||
decl('--tw-inset-shadow-color', value),
|
||||
decl('--tw-inset-shadow', 'var(--tw-inset-shadow-colored)'),
|
||||
]
|
||||
return [boxShadowProperties(), decl('--tw-inset-shadow-color', value)]
|
||||
}
|
||||
default: {
|
||||
return [
|
||||
boxShadowProperties(),
|
||||
decl('--tw-inset-shadow', `inset ${value}`),
|
||||
decl(
|
||||
'--tw-inset-shadow-colored',
|
||||
replaceShadowColors(`inset ${value}`, 'var(--tw-inset-shadow-color)'),
|
||||
'--tw-inset-shadow',
|
||||
`inset ${replaceShadowColors(value, (color) => `var(--tw-inset-shadow-color, ${color})`)}`,
|
||||
),
|
||||
decl('box-shadow', cssBoxShadowValue),
|
||||
]
|
||||
@@ -4358,7 +4349,6 @@ export function createUtilities(theme: Theme) {
|
||||
return [
|
||||
boxShadowProperties(),
|
||||
decl('--tw-inset-shadow', nullShadow),
|
||||
decl('--tw-inset-shadow-colored', nullShadow),
|
||||
decl('box-shadow', cssBoxShadowValue),
|
||||
]
|
||||
}
|
||||
@@ -4371,10 +4361,9 @@ export function createUtilities(theme: Theme) {
|
||||
if (candidate.modifier) return
|
||||
return [
|
||||
boxShadowProperties(),
|
||||
decl('--tw-inset-shadow', value),
|
||||
decl(
|
||||
'--tw-inset-shadow-colored',
|
||||
replaceShadowColors(value, 'var(--tw-inset-shadow-color)'),
|
||||
'--tw-inset-shadow',
|
||||
replaceShadowColors(value, (color) => `var(--tw-inset-shadow-color, ${color})`),
|
||||
),
|
||||
decl('box-shadow', cssBoxShadowValue),
|
||||
]
|
||||
@@ -4385,11 +4374,7 @@ export function createUtilities(theme: Theme) {
|
||||
{
|
||||
let value = resolveThemeColor(candidate, theme, ['--box-shadow-color', '--color'])
|
||||
if (value) {
|
||||
return [
|
||||
boxShadowProperties(),
|
||||
decl('--tw-inset-shadow-color', value),
|
||||
decl('--tw-inset-shadow', 'var(--tw-inset-shadow-colored)'),
|
||||
]
|
||||
return [boxShadowProperties(), decl('--tw-inset-shadow-color', value)]
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -12,30 +12,30 @@ const table = [
|
||||
},
|
||||
{
|
||||
input: '1px 1px var(--my-color)',
|
||||
output: '1px 1px var(--tw-shadow-color)',
|
||||
output: '1px 1px var(--tw-shadow-color, var(--my-color))',
|
||||
},
|
||||
{
|
||||
input: '0 0 0 var(--my-color)',
|
||||
output: '0 0 0 var(--tw-shadow-color)',
|
||||
output: '0 0 0 var(--tw-shadow-color, var(--my-color))',
|
||||
},
|
||||
{
|
||||
input: '1px 2px',
|
||||
output: '1px 2px var(--tw-shadow-color)',
|
||||
output: '1px 2px var(--tw-shadow-color, currentcolor)',
|
||||
},
|
||||
{
|
||||
input: '1px 2px 3px',
|
||||
output: '1px 2px 3px var(--tw-shadow-color)',
|
||||
output: '1px 2px 3px var(--tw-shadow-color, currentcolor)',
|
||||
},
|
||||
{
|
||||
input: '1px 2px 3px 4px',
|
||||
output: '1px 2px 3px 4px var(--tw-shadow-color)',
|
||||
output: '1px 2px 3px 4px var(--tw-shadow-color, currentcolor)',
|
||||
},
|
||||
{
|
||||
input: ['var(--my-shadow)', '1px 1px var(--my-color)', '0 0 1px var(--my-color)'].join(', '),
|
||||
output: [
|
||||
'var(--my-shadow)',
|
||||
'1px 1px var(--tw-shadow-color)',
|
||||
'0 0 1px var(--tw-shadow-color)',
|
||||
'1px 1px var(--tw-shadow-color, var(--my-color))',
|
||||
'0 0 1px var(--tw-shadow-color, var(--my-color))',
|
||||
].join(', '),
|
||||
},
|
||||
]
|
||||
@@ -43,7 +43,7 @@ const table = [
|
||||
it.each(table)(
|
||||
'should replace the color of box-shadow $input with $output',
|
||||
({ input, output }) => {
|
||||
let parsed = replaceShadowColors(input, 'var(--tw-shadow-color)')
|
||||
let parsed = replaceShadowColors(input, (color) => `var(--tw-shadow-color, ${color})`)
|
||||
expect(parsed).toEqual(output)
|
||||
},
|
||||
)
|
||||
@@ -3,8 +3,9 @@ import { segment } from './segment'
|
||||
const KEYWORDS = new Set(['inset', 'inherit', 'initial', 'revert', 'unset'])
|
||||
const LENGTH = /^-?(\d+|\.\d+)(.*?)$/g
|
||||
|
||||
export function replaceShadowColors(input: string, replacement: string): string {
|
||||
for (let shadow of segment(input, ',')) {
|
||||
export function replaceShadowColors(input: string, replacement: (color: string) => string) {
|
||||
let shadows = segment(input, ',').map((shadow) => {
|
||||
shadow = shadow.trim()
|
||||
let parts = segment(shadow, ' ').filter((part) => part.trim() !== '')
|
||||
let color = null
|
||||
let offsetX = null
|
||||
@@ -30,17 +31,18 @@ export function replaceShadowColors(input: string, replacement: string): string
|
||||
// If the x and y offsets were not detected, the shadow is either invalid or
|
||||
// using a variable to represent more than one field in the shadow value, so
|
||||
// we can't know what to replace.
|
||||
if (offsetX === null || offsetY === null) continue
|
||||
if (offsetX === null || offsetY === null) return shadow
|
||||
|
||||
let replacementColor = replacement(color ?? 'currentcolor')
|
||||
|
||||
if (color !== null) {
|
||||
// If a color was found, replace the color.
|
||||
input = input.replace(color, replacement)
|
||||
} else {
|
||||
// If no color was found, assume the shadow is relying on the browser
|
||||
// default shadow color and append the replacement color.
|
||||
input = `${input} ${replacement}`
|
||||
return shadow.replace(color, replacementColor)
|
||||
}
|
||||
}
|
||||
// If no color was found, assume the shadow is relying on the browser
|
||||
// default shadow color and append the replacement color.
|
||||
return `${shadow} ${replacementColor}`
|
||||
})
|
||||
|
||||
return input
|
||||
return shadows.join(', ')
|
||||
}
|
||||
@@ -164,13 +164,14 @@ test('shadow colors', async ({ page }) => {
|
||||
let { getPropertyValue } = await render(
|
||||
page,
|
||||
html`
|
||||
<div id="x" class="shadow shadow-red-500"></div>
|
||||
<div id="y" class="shadow-xl shadow-red-500"></div>
|
||||
<div id="z" class="shadow-[0px_2px_4px] shadow-red-500"></div>
|
||||
<div id="a" class="shadow shadow-red-500"></div>
|
||||
<div id="b" class="shadow-xl shadow-red-500"></div>
|
||||
<div id="c" class="shadow-[0px_2px_4px] shadow-red-500"></div>
|
||||
<div id="d" class="shadow shadow-red-500 hover:shadow-xl">Hello world</div>
|
||||
`,
|
||||
)
|
||||
|
||||
expect(await getPropertyValue('#x', 'box-shadow')).toEqual(
|
||||
expect(await getPropertyValue('#a', 'box-shadow')).toEqual(
|
||||
[
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
@@ -179,7 +180,7 @@ test('shadow colors', async ({ page }) => {
|
||||
'rgb(239, 68, 68) 0px 1px 3px 0px, rgb(239, 68, 68) 0px 1px 2px -1px',
|
||||
].join(', '),
|
||||
)
|
||||
expect(await getPropertyValue('#y', 'box-shadow')).toEqual(
|
||||
expect(await getPropertyValue('#b', 'box-shadow')).toEqual(
|
||||
[
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
@@ -188,7 +189,7 @@ test('shadow colors', async ({ page }) => {
|
||||
'rgb(239, 68, 68) 0px 20px 25px -5px, rgb(239, 68, 68) 0px 8px 10px -6px',
|
||||
].join(', '),
|
||||
)
|
||||
expect(await getPropertyValue('#z', 'box-shadow')).toEqual(
|
||||
expect(await getPropertyValue('#c', 'box-shadow')).toEqual(
|
||||
[
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
@@ -197,6 +198,90 @@ test('shadow colors', async ({ page }) => {
|
||||
'rgb(239, 68, 68) 0px 2px 4px 0px',
|
||||
].join(', '),
|
||||
)
|
||||
|
||||
expect(await getPropertyValue('#d', 'box-shadow')).toEqual(
|
||||
[
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgb(239, 68, 68) 0px 1px 3px 0px, rgb(239, 68, 68) 0px 1px 2px -1px',
|
||||
].join(', '),
|
||||
)
|
||||
|
||||
await page.locator('#d').hover()
|
||||
|
||||
expect(await getPropertyValue('#d', 'box-shadow')).toEqual(
|
||||
[
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgb(239, 68, 68) 0px 20px 25px -5px, rgb(239, 68, 68) 0px 8px 10px -6px',
|
||||
].join(', '),
|
||||
)
|
||||
})
|
||||
|
||||
test('inset shadow colors', async ({ page }) => {
|
||||
let { getPropertyValue } = await render(
|
||||
page,
|
||||
html`
|
||||
<div id="a" class="inset-shadow-sm inset-shadow-red-500"></div>
|
||||
<div id="b" class="inset-shadow inset-shadow-red-500"></div>
|
||||
<div id="c" class="inset-shadow-[0px_3px_6px] inset-shadow-red-500"></div>
|
||||
<div id="d" class="inset-shadow-sm inset-shadow-red-500 hover:inset-shadow">Hello world</div>
|
||||
`,
|
||||
)
|
||||
|
||||
expect(await getPropertyValue('#a', 'box-shadow')).toEqual(
|
||||
[
|
||||
'rgb(239, 68, 68) 0px 1px 1px 0px inset',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
].join(', '),
|
||||
)
|
||||
expect(await getPropertyValue('#b', 'box-shadow')).toEqual(
|
||||
[
|
||||
'rgb(239, 68, 68) 0px 2px 4px 0px inset',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
].join(', '),
|
||||
)
|
||||
expect(await getPropertyValue('#c', 'box-shadow')).toEqual(
|
||||
[
|
||||
'rgb(239, 68, 68) 0px 3px 6px 0px inset',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
].join(', '),
|
||||
)
|
||||
|
||||
expect(await getPropertyValue('#d', 'box-shadow')).toEqual(
|
||||
[
|
||||
'rgb(239, 68, 68) 0px 1px 1px 0px inset',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
].join(', '),
|
||||
)
|
||||
|
||||
await page.locator('#d').hover()
|
||||
|
||||
expect(await getPropertyValue('#d', 'box-shadow')).toEqual(
|
||||
[
|
||||
'rgb(239, 68, 68) 0px 2px 4px 0px inset',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
'rgba(0, 0, 0, 0) 0px 0px 0px 0px',
|
||||
].join(', '),
|
||||
)
|
||||
})
|
||||
|
||||
test('outline style is optional', async ({ page }) => {
|
||||
|
||||
Reference in new issue
Block a user