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

Reintroduce deprecated theme values #14932

Merged
merged 1 commit into from
Nov 9, 2024

Conversation

adamwathan
Copy link
Member

This PR reintroduces the blur, shadow, drop-shadow, and rounded utilities that were removed in #14849, just to preserve backward compatibility as much as possible.

These values are still considered deprecated, and we register them as inline reference with the theme to ensure they don't produce any CSS variables in output:

/* Deprecated */
@theme default inline reference {
  --blur: 8px;
  --shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --drop-shadow: 0 1px 2px rgb(0 0 0 / 0.1), 0 1px 1px rgb(0 0 0 / 0.06);
  --radius: 0.25rem;
}

These values won't be included in the documentation, and in the future we'll add an option to explicitly register things as deprecated so that they don't appear as completions in IntelliSense either.

@adamwathan adamwathan requested a review from a team as a code owner November 9, 2024 14:13
@adamwathan adamwathan merged commit 1dbd99d into next Nov 9, 2024
1 check passed
@adamwathan adamwathan deleted the change/reintroduce-deprecated-theme-values branch November 9, 2024 14:21
@ktmn
Copy link

ktmn commented Nov 21, 2024

Why deprecate it rather than use it as a "default"?

One site's theme might have:

/* Radii */
--radius-xs: 0.125rem;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
...
--radius: var(--radius-sm);

and another:

/* Radii */
--radius-xs: 0.125rem;
--radius-sm: 0.25rem;
--radius-md: 0.375rem;
...
--radius: 0px;

and when I copy a component, like a button, that uses the rounded class, it will be rounded on one site and not rounded on the other, without giving it any thought. But if that button had used rounded-sm I would manually have to remove it on the site that doesn't use rounded corners, cause I wouldn't want to change --radius-sm to 0px in the theme itself and mess up the scale.

Furthermore, if I keep the rounded class on the button, even though it's 0px, later down the line I can choose to simply change it to another value and the whole site goes from not rounded corners to rounded corners.

From #14849:

The motivation for this change is just to make the scale more predictable — it's never been intuitive to me that shadow sits in between shadow-sm and shadow-md.

That part I agree with, even though in my mental model I didn't consider the "bare" utility as sequential in the scale - it's been whatever the current design uses 95% of the time, and I didn't adjust the scale around it. So the --radius: .25rem; becoming --radius-sm: .25rem; is actually great, the .25rem value won't disappear from the scale if I wanted to make the default radius 1rem or something, but I don't see why the bare value should now go away entirely.

This PR doesn't remove the ability to create classes like shadow and inset-shadow by adding bare --shadow and --inset-shadow theme variables, but does remove them from the default theme.

In which case I'm not complaining :) I just feel like I'm always going to be adding the bare values back myself, cause they're great.

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