Introduction
Skin v11 marks another significant step towards normalizing & unifying our DS4 and DS6 "skins" under a single design system language (internally referred to as "6.5").
DS6 is now rebranded as our "default" skin, and DS4 as our "legacy" skin (although we anticipate using the old and new names interchangeably for a little while longer yet).
We see the future of Skin as a token based system that can generate potentially multiple visual expressions (or skins) of the same design system language.
Breaking Changes
There are a significant amount of breaking changes in this release. Please read these notes in full before upgrading.
For detailed information, each section heading contains a link to the relevant issue or PR.
Page Background Colour #1136
The DS4 page background colour has changed from grey (#f5f5f5) to white.
We encourage all teams transitioning from the legacy design system to adopt this new background colour.
Page Font #1178
Both DS4 and DS6 have been updated to use Market Sans for titles only as per the design system language.
Arial is the new default font.
Button #1172
DS4 and DS6 buttons have been consolidated & aligned to the new design system language.
There are three types of button:
default (basic/minimal style)
primary
secondary
There are two sizes:
default (40px height)
large (48px height)
DS4 button colours have not been changed.
DS4 button width has been changed.
All buttons (including dropdown buttons) now have the same default width.
These changes, and simplifications, should hopefully result in less confusion and fewer issues pertaining to button states and styles.
If you wish to retain the old, wider style of buttons, view PR #1277 for two simple ways to opt-in.
CTA Button #1172
Red & blue color variants of CTA-Button have been removed.
Checkbox & Radio #1179
Checkbox and radio button size is no longer driven by a CSS media query - it is now instead driven by SVG icon size (e.g. #icon-checkbox-unchecked vs #icon-checkbox-unchecked-large). The large, non-default size requires a modifier class (e.g. .checkbox--large).
Notice #1150
The first module to undergo a major overhaul is "notice". We have elevated each of the existing base classes to standalone modules:
Window-Notice
Page-Notice
Section-Notice
Inline-Notice
The page-notice (https://ebay.github.io/skin/#page-notice) also underwent some structural changes (#1166). The heading element now wraps the visible text instead of the icon. Please refer to the skin documentation for markup requirements.
Tooltip #1168
Like the notice module, the tooltip base classes have also been elevated into standalone modules:
Tooltip
Infotip
Tourtip
DS4 tooltips, infotips & tourtips have been aligned with the new "decibel-level" system. This means that DS4 borders, pointers & backgrounds are now more in line with DS6.
Dialog #1082
The dialog module has also been broken up into several modules:
Fullscreen Dialog
Lightbox Dialog
Panel Dialog
These three modules complement the two other pre-existing dialogs:
Drawer Dialog
Toast Dialog
Interesting fact: Toast dialog is currently the only non-modal dialog.
Over the past several releases we have worked hard to close the gap on dialog structural differences between DS4 and DS6. In this release, all dialog header structure & layout has been consolidated under a single system (#1171). Please refer to the Skin website to view markup requirements.
The mini-lightbox dialog underwent a minor structural change. The close button was moved before the title in the DOM. This ensures a better reading order for assistive technology (#1261).
Wizard Stepper f91e1f6
In v10, the "wizard-stepper" module was renamed to just stepper. The old name, all classes, and references have now been permanently removed.
Deprecations
Expand Button #1233
Primary and secondary variants have been phased out of the new design system language and removed from our documentation.
Misc Cleanup 226dc72
Old code that was previously deprecated has been removed. A list of significant removals will be posted here. Stay tuned...
Introduction Skin v11 marks another significant step towards normalizing & unifying our DS4 and DS6 "skins" under a single design system language (internally referred to as "6.5").
DS6 is now rebranded as our "default" skin, and DS4 as our "legacy" skin (although we anticipate using the old and new names interchangeably for a little while longer yet).
We see the future of Skin as a token based system that can generate potentially multiple visual expressions (or skins) of the same design system language.
Breaking Changes There are a significant amount of breaking changes in this release. Please read these notes in full before upgrading.
For detailed information, each section heading contains a link to the relevant issue or PR.
Page Background Colour #1136 The DS4 page background colour has changed from grey (#f5f5f5) to white.
We encourage all teams transitioning from the legacy design system to adopt this new background colour.
Page Font #1178 Both DS4 and DS6 have been updated to use Market Sans for titles only as per the design system language.
Arial is the new default font.
Button #1172 DS4 and DS6 buttons have been consolidated & aligned to the new design system language.
There are three types of button:
default (basic/minimal style) primary secondary There are two sizes:
default (40px height) large (48px height) DS4 button colours have not been changed.
DS4 button width has been changed.
All buttons (including dropdown buttons) now have the same default width.
These changes, and simplifications, should hopefully result in less confusion and fewer issues pertaining to button states and styles.
If you wish to retain the old, wider style of buttons, view PR #1277 for two simple ways to opt-in.
CTA Button #1172 Red & blue color variants of CTA-Button have been removed.
Checkbox & Radio #1179 Checkbox and radio button size is no longer driven by a CSS media query - it is now instead driven by SVG icon size (e.g. #icon-checkbox-unchecked vs #icon-checkbox-unchecked-large). The large, non-default size requires a modifier class (e.g. .checkbox--large).
Notice #1150 The first module to undergo a major overhaul is "notice". We have elevated each of the existing base classes to standalone modules:
Window-Notice Page-Notice Section-Notice Inline-Notice The page-notice (https://ebay.github.io/skin/#page-notice) also underwent some structural changes (#1166). The heading element now wraps the visible text instead of the icon. Please refer to the skin documentation for markup requirements.
Tooltip #1168 Like the notice module, the tooltip base classes have also been elevated into standalone modules:
Tooltip Infotip Tourtip DS4 tooltips, infotips & tourtips have been aligned with the new "decibel-level" system. This means that DS4 borders, pointers & backgrounds are now more in line with DS6.
Dialog #1082 The dialog module has also been broken up into several modules:
Fullscreen Dialog Lightbox Dialog Panel Dialog These three modules complement the two other pre-existing dialogs:
Drawer Dialog Toast Dialog Interesting fact: Toast dialog is currently the only non-modal dialog.
Over the past several releases we have worked hard to close the gap on dialog structural differences between DS4 and DS6. In this release, all dialog header structure & layout has been consolidated under a single system (#1171). Please refer to the Skin website to view markup requirements.
The mini-lightbox dialog underwent a minor structural change. The close button was moved before the title in the DOM. This ensures a better reading order for assistive technology (#1261).
Wizard Stepper f91e1f6 In v10, the "wizard-stepper" module was renamed to just stepper. The old name, all classes, and references have now been permanently removed.
Deprecations Expand Button #1233 Primary and secondary variants have been phased out of the new design system language and removed from our documentation.
Misc Cleanup 226dc72 Old code that was previously deprecated has been removed. A list of significant removals will be posted here. Stay tuned...
New Features Alert & Confirm Dialogs #1176 #1175