Skin v13: Evolution

The Evolution Design System is the catalyst to synthesize previous design systems into a unified eBay experience across all platforms. This system raises the quality bar of UX and systems design while thoughtfully retaining what is most familiar to customers.

Yes, a new design system update is here. This latest incarnation is called "Evolution" and should be a fairly seamless update with minimal breaking changes to those pages currently running on DS6.5.

We hope you like the changes as much as we do! Please doff your cap to our very talented design crew.

Below, we will highlight some of the main changes. For a more exhaustive list of changes, please visit the 13.0.0 milestone page.

Market-Sans Strikes Back #1550

Yes, you read that right, Market Sans is back! Just like the Empire that we thought vanquished at the end of Episode IV, it would appear that Market-Sans went into hiding, rebuilt its giant moon base, hired a motley crew of bounty hunters and has re-established its own brand of law & order once again. What I'm trying to say is, in a sudden narrative twist, our core product is back to using Market Sans for all text, no matter what platform or size.

I do however have a feeling this may not be the last tale in the saga...

Okay, enough of all that, I've had my bit of fun, now let's get through the rest of these updates quickly and to the point!

p.s. the @font-family-market-sans variable was removed. You should no longer need to specify this anywhere in your code, as it is now the default. If you must, for whatever reason, use @font-family-default instead.

Button #1506

Evolution introduces a new "tertiary" button type:

A new "loading" state is also available. It can be applied to primary, secondary or tertiary buttons:

Icon Button #1477

Icon Button now has a grey circle background by default. This grey background can be disabled in certain cases (e.g. when on non-compatible background colors).

Before

After

Filters #1528 & #1534

The main change for filters is that checkboxes and radios now use color-text-primary instead of color-b4.

Keyboard focus outline was also changed (see #1534).

Before

After

Listbox-Button #1533

Listbox-Button pattern has being updated to include the "label" and value within the button itself.

Before

After

Notices (BREAKING) #1469 & #1569

In what appears to me to be a more streamlined, down-to-business approach, page notices lose their rounded, child-friendly edges; section notices change to a more uniform-grey background; celebration notice is removed.

The HTML structure has also changed. This is a breaking change (see #1569). Please refer to the documentation on our website for the new markup structure. In short, the H2 heading now wraps the first line of visible text, whereas previously it wrapped the SVG icon.

Before

After

Pagination #1435 & #1519

Pagination is simplified to use styling similar to tabs. The controls use the new icon button styling. Overflow variants account for pages between the first set and the last page. The first and last page are always visible.

Before

After

Floating Label / Select #1564

Floating Label was updated to support the Select form control.

Tabs #1436

Tabs have been updated to be lightweight and friendly. The two-line tab design is deprecated and active state is changed from blue to primary text grey.

Before

After

Textbox (and Combobox)

The textbox border/stroke has been darkened to improve contrast and overall accessibility.

Before

After

Typography #1446

A new "giant-3" level is the new king of the (type ramp) castle:

Badge #1516

Badge received some minor visual updates, including a smaller font and slight repositioning on Icon Button.

Window Notice (DEPRECATED)

The window notice was deprecated and removed from all documentation.

Other Breaking Changes

This section details other breaking changes introduced in addition to those mentioned in the Evolution section above. Be sure to read in full before upgrading!

Goodbye Internet Explorer #1428

This release marks the end of an era. It will come as little surprise, and no doubt much celebration, that we no longer support Internet Explorer in any shape or form.

It is with mixed emotions that I bid it farewell. IE has been a mainstay of my web development process since the first browser wars of the mid-late 90s. Yes, all the way back when Oasis and Blur were duking it out in their very own Battle of Britpop. However, what could have perhaps been a teary-eyed eulogy from me (had the plug been pulled several years sooner by MS) now only gives way to a mounting sense of freedom, relief and one very special, last salute...

Thanks, Liam.

DS4 & Legacy Skin Pack

For pages wishing to stubbornly persevere continue on DS4 (now affectionally, and somewhat condescendingly, known as "Legacy") there is a new "legacy-theme" module that you must include in order to maintain parity with the old DS4 look and feel.

If you are feeling adventurous, you can omit this module and opt into a kind of quasi-ds-six-point-five-evolution look and feel. Meaning, it will have the colour palette of DS4 but the look and feel of Evolution. The best example I can think of to demonstrate this is the page notice pattern. With the legacy-theme module included, page notices will continue to have a very DS4-like transparent background and solid border; whereas with the module omitted, page notices will have the newer, solid-color block scheme and no border.

In some upcoming major release we will be retiring the legacy edition of skin altogether and this module represents a significant milestone in that slow, ponderous death march journey. We encourage all teams to upgrade and be part of the evolution design system.

DS4 & Iconography #1429

Maintenance of legacy DS4 iconography SVGs has been discontinued. By default, both legacy and evolution will receive the same set of SVG icons.

Lightbox Dialog #1453

The alert & confirm variants have been moved out of the lightbox-dialog module and into their own modules, alert-dialog and confirm-dialog respectively. Be sure to update your references & markup accordingly. This change should aid discoverability of these two important patterns.

Deprecated Aliases Now Removed

Every major release we clean up some dead wood. This time around we removed some old, deprecated variables aliases. If your code is using any of the old aliases, please be sure to update to the latest.

// Deprecated product aliases
@color-action-visited: @color-link-visited;
@color-divider: @color-separator;

// Old DS4 aliases mapped to new DS6.5 palette
// TODO: deprecate these aliases, replace throughout system with 6.5 aliases
//-----------------------------

@color-core-white: @color-white;
@color-core-gray-light: @color-grey1;
@color-core-gray-gainsboro: @color-grey2;
@color-core-gray-silver: @color-grey3;
@color-core-gray-spanish: @color-grey4;
@color-core-gray-dim: @color-grey5;
@color-core-gray-davys: #555; // todo: remove from system
@color-core-gray-jet: @color-grey6;
@color-core-black: @color-black;

// Core DS4 Colours
// deprecated aliases
//-----------------------------

@color-core-orange: @color-o4;
@color-core-red: @color-r4;
@color-core-blue: @color-b4;
@color-core-blue-dark: @color-b6;
@color-core-green: @color-g4; // todo: does not pass a11y color contrast
@color-core-purple: @color-m4;
@color-core-violet: #b1a9dc; // no ds6 mapping
@color-core-beige: #f0eeec; // no ds6 mapping
@color-core-beige-light: #f5f5f5; // no ds6 mapping

// DS4 Text Colours
// deprecated aliases
//-----------------------------

@color-text-subheader: @color-grey5;
@color-text-footnote: @color-grey4;
@color-text-critical: @color-status-attention;
@color-text-positive: @color-status-confirmation;

New Features & Enhancements

Dark Mode ^BETA

Dark mode is now available for all modules. To opt in, simply include the @ebay/skin/dark-mode module.

This module is in beta status, so you may experience one or two glitches in the matrix here and there. Please let us know if you do.

Finally, our Token Based System

With the death of IE11 and the ability to fully leverage modern CSS we are now able to reinvent Skin from the ground up as a token based system that can easily power multiple visual expressions of our design system. This should ultimately signal the end of a need for flags (but not quite yet).

Tokens operate in a descending 3-level hierarchy:

1. "global" tokens at the top - always point to a primitive css value
2. "product" tokens in the middle - should always point to a global token
3. "component" tokens at the bottom - should always point to a product token

We are still working on the exact nomenclature, but the basic idea is that changing a token value at any level will cascade down through the levels below it.

Image taken from What Are Design Tokens? A Design Systems Tool

Below is an example taken from the dark mode module.

@media (prefers-color-scheme: dark) {
  :root {
        --color-action-primary: @color-action-primary-dark-mode;
        --color-action-secondary: @color-action-secondary-dark-mode;
        --color-action-tertiary: @color-action-tertiary-dark-mode;
        --color-action-destroy: @color-action-destroy-dark-mode;
        --color-action-hover: @color-action-hover-dark-mode;
        --color-action-disabled: @color-action-disabled-dark-mode;
        --color-background-default: @color-background-default-dark-mode;
        --color-form-control-background: @color-form-control-background-dark-mode;
        --color-form-control-disabled-background: @color-form-control-disabled-background-dark-mode;
        --color-link-default: @color-link-default-dark-mode;
        --color-link-hover: @color-link-hover-dark-mode;
        --color-link-visited: @color-link-visited-dark-mode;
        --color-selection-list-background: @color-selection-list-background-dark-mode;
        --color-selection-list-item-border: @color-selection-list-background-dark-mode;
        --color-selection-list-item-foreground: @color-selection-list-item-foreground-dark-mode;
        --color-selection-list-item-hover-foreground: @color-selection-list-item-hover-foreground-dark-mode;
        --color-text-primary: @color-text-primary-dark-mode;
        --color-text-default: @color-text-primary-dark-mode;
        --color-text-secondary: @color-text-secondary-dark-mode;
        --color-text-disabled: @color-text-disabled-dark-mode;
        --color-text-confirmation: @color-text-confirmation-dark-mode;
        --color-status-attention: @color-status-attention-dark-mode;
        --color-status-confirmation: @color-status-confirmation-dark-mode;
        --color-status-information: @color-status-information-dark-mode;
        --color-status-general: @color-status-general-dark-mode;
        --color-separator: @color-separator-dark-mode;
        --color-image-border: @color-image-border-dark-mode;
        --url-image-progress-spinner: @url-image-progress-spinner-dark-mode;
        --url-image-progress-spinner-large: @url-image-progress-spinner-large-dark-mode;
  }
}

Overriding our full set of product-level tokens with different global tokens causes a cascade of overrides through all components. Viola! Just like that, we have our dynamic dark-mode scheme.

This system opens the door for Skin to be used by non-eBay branded projects and headless UI such as MakeupJS and MIND Patterns. These projects can get all of the benefits of a robust, enterprise-level CSS framework, but swap in their own colour palette to create a visual expression that matches their brand.

This system is still in its infancy and we will be providing further information & documentation down the line as we monitor its progress.

Wrapping Up...

This was a big release, with lots of changes and updates. We snuck in a lot of other goodies and couldn't possibly list them all. As ever, if you spot something is not right or have question, please create an issue and we will be right on it!