Skip to content

Conversation

@adamwathan
Copy link
Member

This PR complements #14458 by adding new shadow-initial and inset-shadow-initial utilities that make it possible to "undo" a custom shadow color and revert to the default shadow color for the current shadow size.

For example, in this example the shadow will be red on hover even though the default color for the shadow utility is rgb(0 0 0 / 5%):

<div class="shadow-sm shadow-red-500 hover:shadow">
  <!-- … -->
</div>

This is usually what you want, but if you actually want hover:shadow to apply its default color, you need to know what the color is and add it yourself:

<div class="shadow-sm shadow-red-500 hover:shadow hover:shadow-black/5">
  <!-- … -->
</div>

Using shadow-initial, you can achieve the same thing without having to know what the original color was:

<div class="shadow-sm shadow-red-500 hover:shadow hover:shadow-initial">
  <!-- … -->
</div>

The inset-shadow-initial utility does the same thing for the inset-shadow-* utilities.

@adamwathan adamwathan merged commit eb3bb44 into next Sep 20, 2024
@adamwathan adamwathan deleted the feat/shadow-initial branch September 20, 2024 14:36
adamwathan added a commit that referenced this pull request Sep 20, 2024
This PR complements #14458 by adding new `shadow-initial` and
`inset-shadow-initial` utilities that make it possible to "undo" a
custom shadow color and revert to the default shadow color for the
current shadow size.

For example, in this example the shadow will be red on hover even though
the default color for the `shadow` utility is `rgb(0 0 0 / 5%)`:

```html
<div class="shadow-sm shadow-red-500 hover:shadow">
  <!-- … -->
</div>
```

This is usually what you want, but if you actually want `hover:shadow`
to apply its default color, you need to know what the color is and add
it yourself:

```html
<div class="shadow-sm shadow-red-500 hover:shadow hover:shadow-black/5">
  <!-- … -->
</div>
```

Using `shadow-initial`, you can achieve the same thing without having to
know what the original color was:

```html
<div class="shadow-sm shadow-red-500 hover:shadow hover:shadow-initial">
  <!-- … -->
</div>
```

The `inset-shadow-initial` utility does the same thing for the
`inset-shadow-*` utilities.

---------

Co-authored-by: Adam Wathan <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants