v14.0.1
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!
Our system of LESS variables has served us extremely well for almost ten years, but we now bid it farewell and move into the brave new world of CSS Custom Properties. We are excited about the new opportunities this will bring to Skin and our users! Stay tuned for more details.
Breaking Changes
Version 14 introduces two major breaking changes to our token system and public LESS API:
- Apps must now reference a new "tokens" module in their bundle
- 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 frontend toolset & workflow!
Major 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.
Major 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 gists to assist with the remapping of variable names:
This mapping is not an exhaustive list of every variable in the old system, but contains what we think will be the most common cases. Please contact us if you need assistance.
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:
For the curious, the only difference between DS4 and DS6 variables at this point is the color palette. We've come a long way in normalizing the two systems!
Minor Breaking Change 1
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.
Minor Breaking Change 2
As ever, we use a major release as an opportunity to clear out some dead wood; i.e. previously deprecated LESS variables. Use the guide below to update your references:
Yes, I know we said that we'd bid LESS farewell, but there are a few still lying around. We will no doubt get to those in the next major release.
Minor Breaking Change 3 (CDN users only)
Our CDN now exposes 4 paths. The old skin.min.css path is no longer available. Please see https://opensource.ebay.com/skin/#cdn for more information.
New Features
No new major features were introduced in this release. We added some new icons and updated some colors to certain components.
Updates
- all hover/focus states updated
- feat: added instagram social icon by @agliga #1771
- feat(switch): improved contrast between on/off states (non-breaking) by @ArtBlue #1723
- deprecate expand-button module (create a btn--form or btn--non-rounded modifier) by @ianmcburnie #1759
- docs: update the icon creation guide by @agliga #1423
- update/Add icons by @agliga #1688
- percy integration and storybook cleanup by @ArtBlue #1739
- tech debt: remove various stylelint overrides by @ianmcburnie #1591
- icon: break up giant file into smaller, optional submodules by @agliga #1609
- feat(checkbox|radio): updated fill color by @ArtBlue #1747
