v14.0.0

[ianmcburnie]

Skin v14: Embracing CSS Custom Properties

As with any software following semantic versioning, please read the release notes in full before upgrading to a new major release!

Breaking Changes

Version 14 introduces two major breaking changes to our token system and public LESS API:

1. Apps must now reference a new "tokens" module in their bundle
2. Apps must remap all existing LESS variable references to our new system of CSS vars

We hope that developers will understand and embrace this step towards modernizing our CSS toolset & workflow!

There are no other breaking changes.

Breaking Change 1

The LESS based token system has been replaced with a CSS Custom Property based system. The defaults for these tokens must be explicitly set by including one of the following modules in the application bundle:

• @ebay/skin/tokens
• @ebay/skin/legacy-tokens

Skin will not render correctly without including one of these modules!

It is also entirely possible for non-eBay branded pages to roll their own set of tokens. We'll be revealing further details on this at a later time.

Breaking Change 2

Because the public LESS API has now been almost completely removed from our package, any apps containing references to those missing variables will throw an error at build time.

There are two paths for apps to resolve this:

• A) Remap all existing LESS variable references to the new CSS variables
• B) Take a local copy of the old LESS variables

Path A (recommended)

In addition to switching out LESS vars for CSS vars, a completely new and streamlined token-naming convention has been introduced. This means that many of the new token names in CSS do not map directly to the old system in LESS.

Fear not, we have created the following gist to assist with the remapping of variable names:

• Variable Remapping Guide (working on it!)

Path B

To quickly get an app compiling again, it is possible of course to just copy over the old collection of LESS variables directly into the app's local repository. The downside is that, over time, the values in the LESS variables will become out of sync with the values in the CSS custom properties, i.e. the styles on your page will become stale.

Although not recommended, we have created the following gists for the convenience of those that must choose this path:

• DS6 Variables
• DS4 Variables

Breaking Change 3

Yes, I know we said there are only two breaking changes, but this third one is related to a beta feature - Dark Mode - so we are bending the rules slightly!

The existing @ebay/skin/dark-mode module has been replaced with a new module: @ebay/skin/tokens/evo-dark. The new module does exactly the same as the old module (opts-in to dark mode compatibility), it has just been shuffled under a new parent module.

New Features

Todo.

Updates

Switch Module (#1770 )

• Updated the spacing and margins of Switch.
• Updated colors of Switch to improve the contrast between on and off states.
• Added stroke for improved element boundary.

Bug Fixes

Todo

---

This discussion was created from the release v14.0.0.

[kentokage]

Thanks for the thorough release notes. When can we expect the Variable Remapping Guide?