Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add shadow-initial and inset-shadow-initial utilities #14468

Merged
merged 3 commits into from
Sep 20, 2024

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
3 checks passed
@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.

2 participants