feat(tailwind): switch spacing utils to use space token CSS props

[matgalla]

Related Issue: #10052

Summary

No values should be changing.

Deprecations: (versions pending - see comment thread)

• deprecates spacing.[2.5] with note: Deprecated in v#.#.#, removal target v#.#.# - use `--calcite-space-sm-plus` instead.

• deprecates spacing.[4.5] with note: Deprecated in v#.#.#, removal target v#.#.# - No longer needed.
  -no longer used in any Calcite Components

• deprecates spacing.11 with note: Deprecated in v#.#.#, removal target v#.#.# - Not intended for sizing, use `--calcite-size-lg` instead.
  ---calcite-size-lg planned to replace all instances of spacing.11

• deprecates spacing.13 with note: Deprecated in v#.#.#, removal target v#.#.# - No longer needed.
  -enhancement planned to replace instance of spacing.13 in tabs

No deprecation needed since the values are the same of tailwind defaults and should still function the same

• removes spacing.[0.5]
• removes spacing.[3.5]
• removes spacing.9

Other details:

For reference, these are the currently in-use (by Calcite Components) tailwind utils that semantic tokens could match:

tailwind util    OIC*   semantic equivalent      value      px (initial)

spacing.0        2      --calcite-space-none     0          0
spacing.1        37     --calcite-space-2xs      0.25rem    4px
spacing.2        27     --calcite-space-sm       0.5rem     8px
spacing.3        30     --calcite-space-md       0.75rem    12px
spacing.4        29     --calcite-space-lg       1rem       16px
spacing.5        6      --calcite-space-xl       1.25rem    20px
spacing.6        14     --calcite-space-2xl      1.5rem     24px
spacing.8        21     --calcite-space-3xl      2rem       32px

*OIC = occurrences in components

And these are the remaining in-use tailwind utils for which there are currently no semantic alternatives. The first few on this list are strong candidates for new semantic space tokens that we may need in the future.

tailwind util   OIC*  value     px (initial)

spacing.10      3     2.5rem    40px
spacing.12      3     3rem      48px
spacing.16      3     4rem      64px
spacing.24      1     6rem      96px
spacing.48      3     12rem     192px
spacing.56      1     14rem     224px
spacing.64      1     16rem     256px
spacing.72      1     18rem     288px

*OIC = occurrences in components

[matgalla]

spacing.11 shows up 9 times across 5 Calcite Components (input, input-text, input-number, stepper, tab-nav). This is the hardest one here to replace with a semantic token since 2.75rem is a spacing interval that we'd rather not include semantically, but I'm talking it through with the team now.

[matgalla]

Updated the deprecation note to show a placeholder for now

[matgalla]

All the instances mentioned above should probably be using size tokens rather than space like Aaron mentioned in the other comment. We can use --calcite-size-lg to replace spacing.11 in the linked examples.

However, I'm thinking that doesn't mean it's a good general recommended replacement option for a deprecation message here (going from spacing -> size that is). Are we okay with just deprecating without a replacement since we have a plan for the instances in our components?

[ashetland]

@jcfranco @driskull ?

[jcfranco]

Could we have the deprecation message or migration note suggest the size token if it is applicable instead of recommending it as a direct replacement? Something like the following?

spacing.11 was incorrectly used in size contexts, so we recommend using --calcite-size-lg instead.

If that doesn't work, it should be fine to deprecate with no direct replacement as long as we provide sufficient details about the removal to users.

[DitwanP]

If I'm understanding what's happening correctly then the wording Franco suggested is pretty much good to go.

Maybe with some small tweaks:

// Deprecated in v5.0.0, removal target v6.0.0 - spacing.11 was used incorrectly for sizing, use --calcite-size-lg instead.

Or since the message will be on the token already we could omit the token name from the deprecation message.

// Deprecated in v5.0.0, removal target v6.0.0 - Not intended for sizing, use --calcite-size-lg instead.

[matgalla]

Love it! If we get this in for the patch today March milestone, would the version technically be 5.0.1 5.1.0?

[DitwanP]

Yup! 5.1.0 🎯

[matgalla]

Actually, even more technically, since this is in the tailwind-preset package, would this be a deprecation on version 1.1.x, per the changelog? cc @jcfranco

[matgalla]

Assuming that the first hypothetical breaking change for the tailwind-preset package would be 2.0.0, would we go with this?

// Deprecated in v1.1.x, removal target v2.0.0 - Not intended for sizing, use --calcite-size-lg instead.

Or if we are okay with basing the removal on a different package, then maybe:

// Deprecated in v1.1.x, removal target Calcite Components v6.0.0 - Not intended for sizing, use --calcite-size-lg instead.

[matgalla]

I'm skipping visual snapshots now since there were no issues found after the initial changes were made: UI test link