eBay Skin DS6
Contents
- @ebay/skin/global
- @ebay/skin/less
- @ebay/skin/button
- @ebay/skin/color
- @ebay/skin/icon
- @ebay/skin/listbox
- @ebay/skin/menu
- @ebay/skin/notice
- @ebay/skin/svg
- @ebay/skin/typography
@ebay/skin/global
Font Family
Applications on Node.js stack will not receive the eBay Market Sans font as the default font. Applications must use the ebay-font loader.
Websites utilising Skin via CDN will have the eBay Market Sans font as the default font.
Paragraph without Market Sans
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Paragraph with Market Sans
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Link States
The states below are hardcoded for the purpose of this demo.
@ebay/skin/less
The LESS module contains variables and mixins.
Typography
- .ds6-typography-giant-2
- .ds6-typography-giant-1
- .ds6-typography-large-2-bold
- .ds6-typography-large-2
- .ds6-typography-large-2-secondary
- .ds6-typography-large-1-bold
- .ds6-typography-large-1
- .ds6-typography-large-1-secondary
- .ds6-typography-medium-bold
- .ds6-typography-medium
- .ds6-typography-medium-secondary
- .ds6-typography-regular-bold
- .ds6-typography-regular
- .ds6-typography-regular-secondary
- .ds6-typography-small-bold
- .ds6-typography-small
- .ds6-typography-small-secondary
Color Palette
- @ds6-color-g201-gray
- @ds6-color-g202-gray
- @ds6-color-g203-gray
- @ds6-color-g204-gray
- @ds6-color-g205-gray
- @ds6-color-g206-gray
- @ds6-color-p001-blue
- @ds6-color-p002-blue
- @ds6-color-p003-blue
- @ds6-color-p004-blue
- @ds6-color-p011-red
- @ds6-color-p012-red
- @ds6-color-p013-red
- @ds6-color-p021-yellow
- @ds6-color-p022-yellow
- @ds6-color-p031-green
- @ds6-color-p032-green
- @ds6-color-p033-green
Product Usage
- @ds6-color-text-default
- @ds6-color-text-secondary
- @ds6-color-link-default
- @ds6-color-link-visited
- @ds6-color-information-background
- @ds6-color-badge
- @ds6-color-star
- @ds6-color-warning-background
- @ds6-color-critical-text
- @ds6-color-critical-background
- @ds6-color-confirmation-text
- @ds6-color-confirmation-background
- @ds6-color-background-default
@ebay/skin/color
Static sites that do not have access to the LESS variables can leverage the color palette via the color module.
Please reference the LESS module for all available colours. Please note, that the class names emit the "ds6-" prefix.
@ebay/skin/icon
The icon module allows direct access to the Skin iconography via inline SVG. Although Skin itself also utilises background SVG in some cases (via data uri), the benefit of inline SVG is that the icon will inherit the color of it's containing element. This behaviour can be useful when crafting custom buttons and controls.
To avoid gigantic SVG icons when in a non-CSS (edge-case) state, we use the SVG width and height attributes to override the default 300x150 size.
See the @ebay/skin/svg module for instructions on how to import SVG symbols, and yes, we will be adding more icons in an upcoming release!
@ebay/skin/listbox
The Skin listbox is intended for use as a custom view (or facade) for the native HTML select element. JavaScript will be required to create 2-way binding between the two.
Note: Because the listbox uses an input element, which must grow to properly display it's contents, we have chosen to have the listbox always remain fluid. It is up to the developer to contain the width, if necessary. Extra care will be needed when placing a listbox side-by-side with other controls such as buttons and textboxes.
Default Listbox
By default, the first item should be selected if the user does not specify a selection. This matches the behavior of a native HTML select element.
Selected Listbox
@ebay/skin/notice
Page Notice
A page-level notice typically appears prominently at the top of the page or directly above a module. To aid discoverabilty of such important content for assistive technology, we make each page notice a landmark region with heading.
Congrats! You just listed "Spam and Eggs From the Cow's Perspective (paperback)."
Error. Please take another look at the following:
Card number, Expiration date & Security code.
Good news! You get free shipping on your next pair of shoes! Learn more.
Inline Notice
An inline-level notice is typically located near a form field or user interface control.
Delivered on May 1, 2017
Tracking number: 93878473859376898908657567
Update your credit card.
Global Shipping Program transaction.
@ebay/skin/svg
This module imports an SVG file containing all Skin symbol definitions.
Due to lack of browser support for external SVG definitions, we recommend inlining the definitions that you need in a hidden SVG block.
Note that in the examples below, we use the SVG viewBox attribute to crop out the "frame" (i.e. the whitespace) around the actual icon. This allows us to use CSS to fine-tune margins around icons, rather than the often arbitrary amount found in the SVG itself.
@ebay/skin/typography
Static sites that do not have access to LESS preprocessor can leverage the Skin type ramp via the typography module.
- .giant-text-2
- .giant-text-1
- .large-text-2
- .large-text-1
- .medium-text
- .regular-text
- .small-text
With the exception of giant text, which is always bold, all other entries in the type ramp can be set to bold-text or secondary-text by adding the relevant class:
- .large-text-2 .bold-text
- .large-text-2 .secondary-text