diff --git a/src/components/about.marko b/src/components/about.marko index 3c114fc11..fd8cb7337 100644 --- a/src/components/about.marko +++ b/src/components/about.marko @@ -1,7 +1,7 @@

About

Skin is a pure CSS framework, created by a team of passionate frontend engineers at eBay.

-

Skin's default stylesheet represents eBay Evo - eBay's evolved brand and design system - but Skin also offers token-based configuration to enable non-eBay branded experiences.

+

Skin's default stylesheet represents eBay Evo - eBay's evolved brand and design system - but Skin also offers token-based configuration to enable non-eBay branded experiences.

Skin adheres to the following core principals:

Accessible
@@ -12,6 +12,6 @@
Skin is decoupled from the JavaScript layer, meaning the HTML and CSS is agnostic of the frontend framework (BYOJ = Bring Your Own Javascript!)*
Scalable
Skin is built on a system of design tokens (implemented as CSS Variables); enabling a scalable and consistent visual system for UI development.
-
+

*This website uses makeup-js to add some basic interactivity to examples where needed.

diff --git a/src/components/components-list.marko b/src/components/components-list.marko index f059cefbd..24f08184d 100644 --- a/src/components/components-list.marko +++ b/src/components/components-list.marko @@ -5,7 +5,7 @@ import path from 'path'; $ const name = componentName.replace(/-([a-z])/g, function (g) { return ` ${g[1].toUpperCase()}`; }); $ const properName = name.charAt(0).toUpperCase() + name.slice(1);
  • - ${properName} + ${properName}
    • diff --git a/src/components/themes.marko b/src/components/themes.marko index a85949efa..0b49bbe5c 100644 --- a/src/components/themes.marko +++ b/src/components/themes.marko @@ -30,5 +30,5 @@ --> -

    Warning! Changing the value of any product-level token will cause a ripple effect through all skin modules. If this is not your intention, tokens are also available at the component-level. See switch-variables for an example.

    +

    Warning! Changing the value of any product-level token will cause a ripple effect through all skin modules. If this is not your intention, tokens are also available at the component-level. See switch-variables for an example.

    diff --git a/src/components/token-system.marko b/src/components/token-system.marko index ae80a54f1..da8586a11 100644 --- a/src/components/token-system.marko +++ b/src/components/token-system.marko @@ -11,7 +11,7 @@

    In order for Skin to render correctly, values for core tokens and light tokens are required.

    The easiest way to satisfy this requirement is to include one of the following bundles:

    It is also possible for a page to roll their own tokens sets, enabling a themed or even non-eBay branded look and feel. More information will be provided in a future release.

    diff --git a/src/routes/_index/component/+page.marko b/src/routes/_index/component/+page.marko index c5238b4b4..2605d2f8d 100644 --- a/src/routes/_index/component/+page.marko +++ b/src/routes/_index/component/+page.marko @@ -6,7 +6,7 @@ import path from 'path'; diff --git a/src/routes/_index/component/badge/+page.marko b/src/routes/_index/component/badge/+page.marko index 3766a2c85..54b98e76b 100644 --- a/src/routes/_index/component/badge/+page.marko +++ b/src/routes/_index/component/badge/+page.marko @@ -6,13 +6,13 @@

    The badge module contains the basic, base styles for a static badge element. Badges can also be placed inside of the${" "} - + icon button - + and - + menu - + modules.

    diff --git a/src/routes/_index/component/button/+page.marko b/src/routes/_index/component/button/+page.marko index cbcb1102c..f2b5889ed 100644 --- a/src/routes/_index/component/button/+page.marko +++ b/src/routes/_index/component/button/+page.marko @@ -219,7 +219,7 @@

    Busy State for Button

    -

    Replace the button contents with a progress spinner to represent a busy state. Note also, that the button will need an aria-label to programmatically convey the busy state to assistive technology.

    +

    Replace the button contents with a progress spinner to represent a busy state. Note also, that the button will need an aria-label to programmatically convey the busy state to assistive technology.

    @@ -255,7 +255,7 @@
    -

    NOTE: it is recommended to use a snackbar dialog or inline-notice in order to convey any status of success or failure.

    +

    NOTE: it is recommended to use a snackbar dialog or inline-notice in order to convey any status of success or failure.

    Flexible Button

    diff --git a/src/routes/_index/component/checkbox/+page.marko b/src/routes/_index/component/checkbox/+page.marko index 6cfc17da2..d58db9f2d 100644 --- a/src/routes/_index/component/checkbox/+page.marko +++ b/src/routes/_index/component/checkbox/+page.marko @@ -295,9 +295,9 @@

    The following example uses the - + field module - + for simple layout of checkbox fields and labels.

    diff --git a/src/routes/_index/component/chips-combobox/+page.marko b/src/routes/_index/component/chips-combobox/+page.marko index b09184983..daffd61c5 100644 --- a/src/routes/_index/component/chips-combobox/+page.marko +++ b/src/routes/_index/component/chips-combobox/+page.marko @@ -544,9 +544,9 @@ a11y ${" "}rules, color alone should not be used to indicate an error. For more information, please see the${" "} - + field error state docs - + .

    diff --git a/src/routes/_index/component/date-textbox/+page.marko b/src/routes/_index/component/date-textbox/+page.marko index f88be1957..ea1b00d53 100644 --- a/src/routes/_index/component/date-textbox/+page.marko +++ b/src/routes/_index/component/date-textbox/+page.marko @@ -9,17 +9,17 @@

    The single select date textbox consists of a - + textbox - + plus - + icon button - + . The icon button launches an interactive - + calendar - + inside of a flyout.

    diff --git a/src/routes/_index/component/filter-menu/+page.marko b/src/routes/_index/component/filter-menu/+page.marko index a5078e537..be21cdb5f 100644 --- a/src/routes/_index/component/filter-menu/+page.marko +++ b/src/routes/_index/component/filter-menu/+page.marko @@ -3,9 +3,9 @@

    A filter menu forms the basis of the - + filter-menu-button - + ${" "}module; we provide it here as a standalone version in the case it might be opened or rendered via other means (in a dialog for example).

    @@ -527,13 +527,13 @@

    A form version is also available. It uses the - + checkbox - + and - + radio - + ${" "}modules to render checkboxes or radios instead of ARIA menu items. The form version must contain a submit button.

    diff --git a/src/routes/_index/component/icon-button/+page.marko b/src/routes/_index/component/icon-button/+page.marko index 08c4475a0..1233c310f 100644 --- a/src/routes/_index/component/icon-button/+page.marko +++ b/src/routes/_index/component/icon-button/+page.marko @@ -1,7 +1,7 @@
    -

    Use the icon-btn class (for buttons) or the icon-link class (for links) and any of the available icons for a borderless, actionable icon style.

    +

    Use the icon-btn class (for buttons) or the icon-link class (for links) and any of the available icons for a borderless, actionable icon style.

    @@ -100,7 +100,7 @@

    Badged Icon Button

    -

    An icon button can be badged using the badge module.

    +

    An icon button can be badged using the badge module.

    The button or anchor element requires an additional icon-btn--badged or icon-link--badged modifier, respectively.

    diff --git a/src/routes/_index/component/icon/+page.marko b/src/routes/_index/component/icon/+page.marko index da28a58a4..4f5a58a6e 100644 --- a/src/routes/_index/component/icon/+page.marko +++ b/src/routes/_index/component/icon/+page.marko @@ -33,7 +33,7 @@ import iconJSON from '../../../../components/data/icons.json';

    Including an Icon

    An icon symbol declaration can - be referenced from the same file or an external SVG file. If in the same file, the symbol + be referenced from the same file or an external SVG file. If in the same file, the symbol must be stamped on the page inside of an SVG block.

    We also provide individual icons as SVGs located in this directory. You can include these on your page as raw SVGs as needed.

    diff --git a/src/routes/_index/component/link/+page.marko b/src/routes/_index/component/link/+page.marko index cdb560128..26a2b7460 100644 --- a/src/routes/_index/component/link/+page.marko +++ b/src/routes/_index/component/link/+page.marko @@ -3,9 +3,9 @@

    The link module itself does not provide any base styling of anchor tags, that styling instead comes from the${" "} - + global - + module.

    diff --git a/src/routes/_index/component/listbox-button/+page.marko b/src/routes/_index/component/listbox-button/+page.marko index ca3e59bdb..72bc544b7 100644 --- a/src/routes/_index/component/listbox-button/+page.marko +++ b/src/routes/_index/component/listbox-button/+page.marko @@ -776,9 +776,9 @@

    This is a simple example with a simple error indication. For usage of the error state with an error message, please see the${" "} - + field module - + .

    diff --git a/src/routes/_index/component/menu-button/+page.marko b/src/routes/_index/component/menu-button/+page.marko index 905ef12db..82ce947e5 100644 --- a/src/routes/_index/component/menu-button/+page.marko +++ b/src/routes/_index/component/menu-button/+page.marko @@ -12,30 +12,30 @@ A menu is not ${" "}a form control. If you wish to submit form data natively, without JavaScript, please consider${" "} - + checkbox - + , - + combobox - + , - + select - + , or - + radio - + instead.

    Selecting a menu item command should update the page without ${" "}a full page reload (i.e. acting similar to buttons, checkboxes or radios). If a full page load is required instead (i.e. acting like links), please refer to the${" "} - + fake menu button - + .

    @@ -446,13 +446,13 @@

    If a fixed label is not possible, the button's inner text can potentially be written as a key/value pair, where key denotes purpose and value repesents the current selection. This is most typical in a${" "} - + single select menu button - + . For example: "Sort: Price", "Color: Red". This technique is identical to the method used by${" "} - + Listbox Button - + .

    @@ -904,13 +904,13 @@ be used as a dropdown for selecting and storing form data . Please use - + select - + or - + listbox-button - + for that purpose instead.

    diff --git a/src/routes/_index/component/menu/+page.marko b/src/routes/_index/component/menu/+page.marko index 32ecc6334..badcd76cd 100644 --- a/src/routes/_index/component/menu/+page.marko +++ b/src/routes/_index/component/menu/+page.marko @@ -5,30 +5,30 @@ A menu is not ${" "}a form control. If you wish to submit form data natively, without JavaScript, please consider${" "} - + checkbox - + , - + combobox - + , - + select - + , or - + radio - + instead.

    Selecting a menu item command should update the page without ${" "}a full page reload (i.e. acting similar to buttons, checkboxes or radios). If a full page load is required instead (i.e. acting like links), please refer to the${" "} - + fake menu - + .

    @@ -104,9 +104,9 @@

    A menu item can be badged using the - + badge - + module.

    diff --git a/src/routes/_index/component/phone-input/+page.marko b/src/routes/_index/component/phone-input/+page.marko index 631e1bb9d..cc85bbf91 100644 --- a/src/routes/_index/component/phone-input/+page.marko +++ b/src/routes/_index/component/phone-input/+page.marko @@ -267,9 +267,9 @@ field classes. For label inline usage, please see the - + field module - + .

    diff --git a/src/routes/_index/component/radio/+page.marko b/src/routes/_index/component/radio/+page.marko index 4a960ba4c..2084b4634 100644 --- a/src/routes/_index/component/radio/+page.marko +++ b/src/routes/_index/component/radio/+page.marko @@ -219,9 +219,9 @@

    The following example uses the - + field module - + for simple layout of radio button fields and labels.

    diff --git a/src/routes/_index/component/segmented-buttons/+page.marko b/src/routes/_index/component/segmented-buttons/+page.marko index 0ef825df0..ba7da320c 100644 --- a/src/routes/_index/component/segmented-buttons/+page.marko +++ b/src/routes/_index/component/segmented-buttons/+page.marko @@ -124,9 +124,9 @@

    Any 24x24 - + icon - + can be added inside of a segmented-buttons__button-cell diff --git a/src/routes/_index/component/select/+page.marko b/src/routes/_index/component/select/+page.marko index 91171ea8e..bbe0b07cb 100644 --- a/src/routes/_index/component/select/+page.marko +++ b/src/routes/_index/component/select/+page.marko @@ -6,17 +6,17 @@

    The purpose of a select is to collect form data; therefore a select should always be used in conjunction with a form, label and submit button. If you are not submitting form data, then a${" "} - + menu - + maybe a better choice.

    IMPORTANT: ${" "}The examples below show the select in isolation, without any label. Please see the${" "} - + field - + ${" "}module for details on labeling controls. Remember: every select requires a label!

    diff --git a/src/routes/_index/component/skeleton/+page.marko b/src/routes/_index/component/skeleton/+page.marko index ff19fc463..62659dd09 100644 --- a/src/routes/_index/component/skeleton/+page.marko +++ b/src/routes/_index/component/skeleton/+page.marko @@ -8,9 +8,9 @@

    A skeleton is a graphical placeholder, reserving physical space in the page for content that is not yet available for the client to render. A skeleton can be considered as an alternative to the${" "} - + progress spinner - + in many situations.

    @@ -79,9 +79,9 @@ - + Avatar - +