@ebay/skin 18.1.0 → 18.2.0

package/src/modules/tokens.marko

@@ -0,0 +1,70 @@
+$ const colors = ["avocado", "marigold", "blue", "coral", "orange", "dijon", "pink", "green", "red", "indigo", "teal", "jade", "yellow", "kiwi", "violet", "lilac", "neutral"];
+<div id="tokens">
+    <section-header metadata=input.metadata name=input.name/>
+    <p>Contains all custom properties necessary to correctly render the Evo Design System, in accordance with the <a href="#token-system">token system</a>.</p>
+    <p>Core, light and dark token sets are individually exposed via the following submodules:</p>
+    <dl>
+        <dt><span class="secondary-text">@ebay/skin/tokens/</span>evo-core</dt>
+        <dd>eBay default primitives</dd>
+        <dt><span class="secondary-text">@ebay/skin/tokens/</span>evo-light</dt>
+        <dd>eBay semantic aliases for light mode</dd>
+        <dt><span class="secondary-text">@ebay/skin/tokens/</span>evo-dark<sup>*</sup></dt>
+        <dd>eBay semantic aliases for dark mode</dd>
+    </dl>
+    <p><sup>*</sup>This sub-module will not be included automatically by it's parent module; it must be explicitly included by any page that is itself dark-mode compatible.</p>
+
+    <h3 id="tokens-color-primitive">Primitive Color Tokens</h3>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <ul class="demo-color-primitive">
+                <for |color| of=colors>
+                    <for |i| of=[...Array(7).keys()]>
+                    <li class=`demo-color-${color}-${i}00`>color-${color}-${i+1}00</li>
+                    </for>
+                </for>
+                <li class="demo-color-neutral-900">color-neutral-900</li>
+            </ul>
+        </div>
+    </div>
+
+    <h3 id="tokens-color-semantic">Semantic Color Tokens</h3>
+    <div class="demo">
+        <div class="demo__inner">
+            <ul class="demo-color-token">
+                $ const backgroundTokens = ["primary", "secondary", "disabled", "inverse", "attention", "confirmation", "information", "accent", "invalid"];
+                <for |token| of=backgroundTokens>
+                    <li class=`demo-color-background-${token}`>color-background-${token}</li>
+                </for>
+                $ const foregroundTokens = ["primary", "secondary", "disabled", "attention", "confirmation", "information", "accent", "visited"];
+                <for |token| of=foregroundTokens>
+                    <li class=`demo-color-foreground-${token}`>color-foreground-${token}</li>
+                </for>
+                $ const foregroundOnTokens = ["primary", "secondary", "disabled", "inverse", "accent", "attention", "confirmation", "information"];
+                <for |token| of=foregroundOnTokens>
+                    <li class=`demo-color-foreground-on-${token}`>color-foreground-on-${token}</li>
+                </for>
+                $ const strokenTokens = ["default", "accent", "attention", "confirmation", "information", "disabled", "strong", "subtle"];
+                <for |token| of=strokenTokens>
+                    <li class=`demo-color-stroke-${token}`>color-stroke-${token}</li>
+                </for>
+                $ const stateTokens = ["visited", "primary-hover", "primary-active", "secondary-hover", "secondary-active", "inverse-hover", "inverse-active", "accent-hover", "accent-active", "attention-hover", "attention-active"];
+                <for |token| of=stateTokens>
+                    <li class=`demo-color-state-${token}`>color-state-${token}</li>
+                </for>
+                $ const scrimTokens = ["image", "background"];
+                <for |token| of=scrimTokens>
+                    <li class=`demo-color-scrim-${token}`>color-scrim-${token}</li>
+                </for>
+                $ const aiTokens = ["full-spectrum", "green-strong", "blue-strong", "purple-strong", "green-subtle", "blue-subtle", "purple-subtle"];
+                <for |token| of=aiTokens>
+                    <li class=`demo-color-ai-gradient-${token}`>color-ai-gradient-${token}</li>
+                </for>
+            </ul>
+        </div>
+    </div>
+
+</div>
+export const metadata = {
+
+};

package/src/modules/tooltip.marko

@@ -0,0 +1,160 @@
+<div id="tooltip">
+    <section-header metadata=input.metadata name=input.name/>
+
+    <p>
+        A tooltip gives additional information about an interactive element - typically a button. The tooltip activates on mouse hover or keyboard focus of the button.
+    </p>
+    <p>
+        The tooltip must be programmatically associated with the button by using the${" "}
+        <span class="highlight">
+            aria-describedby
+        </span>
+         property and
+        <span class="highlight">
+            tooltip
+        </span>
+         role.
+    </p>
+    <p>
+        Toggle the
+        <span class="highlight">
+            aria-expanded
+        </span>
+         state of the button to expand or collapse its associated tooltip.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="tooltip">
+                <button
+                    accesskey="s"
+                    class="icon-btn tooltip__host"
+                    aria-describedby="tooltip-0"
+                    aria-expanded="false"
+                    aria-label="Settings"
+                >
+                    <svg
+                        class="icon icon--24"
+                        height="16"
+                        width="16"
+                        aria-hidden="true"
+                    >
+                        <icon-symbol name="settings-24"/>
+                    </svg>
+                </button>
+                <div
+                    class="tooltip__overlay"
+                    id="tooltip-0"
+                    role="tooltip"
+                    style="top: 48px; left: 4px"
+                >
+                    <span class="tooltip__pointer tooltip__pointer--top-left"/>
+                    <div class="tooltip__mask">
+                        <div class="tooltip__cell">
+                            <div class="tooltip__content">
+                                <p>Use Access Key 'S' to display settings.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </span>
+        </div>
+    </div>
+    <highlight-code
+        type="html"
+        >
+<span class="tooltip">
+    <button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
+        </svg>
+    </button>
+    <div class="tooltip__overlay" id="tooltip-0" role="tooltip" style="top: 48px; left: 4px">
+        <span class="tooltip__pointer tooltip__pointer--top-left"></span>
+        <div class="tooltip__mask">
+            <div class="tooltip__cell">
+                <div class="tooltip__content">
+                    <p>Use Access Key 'S' to display settings.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</span>
+    </highlight-code>
+
+    <p>
+        By default, the position of the overlay and its pointer will remain static. For these following examples, we are using${" "}
+        <a target="_blank" href="https://floating-ui.com">
+            floating-ui
+        </a>
+         to help position the tooltip and the pointer dynamically.
+    </p>
+    <p>
+        In order to get this to work with floating-ui, you need to remove pointer position${" "}
+        <span class="highlight">
+            tooltip__pointer--top-left
+        </span>
+         and remove any style positioning
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <span class="tooltip tooltip--js">
+                <button
+                    accesskey="s"
+                    class="icon-btn tooltip__host"
+                    aria-describedby="tooltip-0"
+                    aria-expanded="false"
+                    aria-label="Settings"
+                >
+                    <svg
+                        class="icon icon--24"
+                        height="16"
+                        width="16"
+                        aria-hidden="true"
+                    >
+                        <icon-symbol name="settings-24"/>
+                    </svg>
+                </button>
+                <div class="tooltip__overlay" id="tooltip-0" role="tooltip">
+                    <span class="tooltip__pointer"/>
+                    <div class="tooltip__mask">
+                        <div class="tooltip__cell">
+                            <div class="tooltip__content">
+                                <p>Use Access Key 'S' to display settings.</p>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </span>
+        </div>
+    </div>
+    <highlight-code
+        type="html"
+        >
+<span class="tooltip">
+    <button accesskey="s" class="icon-btn tooltip__host" aria-describedby="tooltip-0" aria-expanded="false" aria-label="Settings">
+        <svg class="icon icon--24" height="16" width="16" aria-hidden="true">
+            <use href="#icon-settings-24"></use>
+        </svg>
+    </button>
+    <div class="tooltip__overlay" id="tooltip-0" role="tooltip">
+        <span class="tooltip__pointer"></span>
+        <div class="tooltip__mask">
+            <div class="tooltip__cell">
+                <div class="tooltip__content">
+                    <p>Use Access Key 'S' to display settings.</p>
+                </div>
+            </div>
+        </div>
+    </div>
+</span>
+    </highlight-code>
+</div>
+export const metadata = {
+    "ds-component": {
+        name: "tooltip",
+        version: 2,
+    },
+    submodules: ["icon-button"],
+};

package/src/modules/tourtip.marko

@@ -0,0 +1,255 @@
+<div id="tourtip">
+    <section-header metadata=input.metadata name=input.name/>
+
+    <p>
+        A tourtip points out a new feature or section of the page. A tourtip is open by default and must be explcitly closed using its close button. Once closed, it cannot be reopened.
+    </p>
+    <p>
+        Toggle the
+        <span class="highlight">
+            tourtip--expanded
+        </span>
+         modifier to expand or collapse the tourtip.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="tourtip tourtip--expanded">
+                <p class="tourtip__host">
+                    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.
+                </p>
+                <div
+                    class="tourtip__overlay"
+                    role="region"
+                    aria-labelledby="tourtip-label"
+                    style="bottom: -125px; left: -6px; top: auto;"
+                >
+                    <span class="tourtip__pointer tourtip__pointer--top-left"/>
+                    <div class="tourtip__mask">
+                        <div class="tourtip__cell">
+                            <span class="tourtip__content">
+                                <h2 class="tourtip__heading" id="tourtip-label">
+                                    Tourtip
+                                </h2>
+                                <p>
+                                    Here's something new to help you be successful at your task.
+                                </p>
+                            </span>
+                            <button
+                                class="icon-btn icon-btn--transparent tourtip__close"
+                                type="button"
+                                aria-label="Dismiss tourtip"
+                            >
+                                <svg
+                                    class="icon icon--16"
+                                    height="16"
+                                    width="16"
+                                    aria-hidden="true"
+                                >
+                                    <icon-symbol name="close-16"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <highlight-code
+        type="html"
+        >
+<div class="tourtip tourtip--expanded">
+    <p class="tourtip__host">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.</p>
+    <div class="tourtip__overlay" role="region" aria-labelledby="tourtip-label" style="bottom: -125px; left: -6px; top: auto;">
+        <span class="tourtip__pointer tourtip__pointer--top-left"></span>
+        <div class="tourtip__mask">
+            <div class="tourtip__cell">
+                <span class="tourtip__content">
+                    <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                    <p>Here's something new to help you be successful at your task.</p>
+                </span>
+                <button class="icon-btn icon-btn--transparent tourtip__close" type="button" aria-label="Dismiss tourtip">
+                    <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-close-16"></use>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+    </highlight-code>
+
+    <p>
+        By default, the position of the overlay and its pointer will remain static. For these following examples, we are using${" "}
+        <a target="_blank" href="https://floating-ui.com">
+            floating-ui
+        </a>
+         to help position the tooltip and the pointer dynamically.
+    </p>
+    <p>
+        In order to get this to work with floating-ui, you need to remove pointer position${" "}
+        <span class="highlight">
+            tourtip__pointer--top-left
+        </span>
+         and remove any style positioning
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="tourtip tourtip--expanded tourtip--js">
+                <p class="tourtip__host">
+                    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.
+                </p>
+                <div
+                    class="tourtip__overlay"
+                    role="region"
+                    aria-labelledby="tourtip-label"
+                >
+                    <span class="tourtip__pointer"/>
+                    <div class="tourtip__mask">
+                        <div class="tourtip__cell">
+                            <span class="tourtip__content">
+                                <h2 class="tourtip__heading" id="tourtip-label">
+                                    Tourtip
+                                </h2>
+                                <p>
+                                    Here's something new to help you be successful at your task.
+                                </p>
+                            </span>
+                            <button
+                                class="icon-btn icon-btn--transparent tourtip__close"
+                                type="button"
+                                aria-label="Dismiss tourtip"
+                            >
+                                <svg
+                                    class="icon icon--16"
+                                    height="16"
+                                    width="16"
+                                    aria-hidden="true"
+                                >
+                                    <icon-symbol name="close-16"/>
+                                </svg>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <highlight-code
+        type="html"
+        >
+<div class="tourtip tourtip--expanded">
+    <p class="tourtip__host">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.</p>
+    <div class="tourtip__overlay" role="region" aria-labelledby="tourtip-label">
+        <span class="tourtip__pointer"></span>
+        <div class="tourtip__mask">
+            <div class="tourtip__cell">
+                <span class="tourtip__content">
+                    <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                    <p>Here's something new to help you be successful at your task.</p>
+                </span>
+                <button class="icon-btn icon-btn--transparent tourtip__close" type="button" aria-label="Dismiss tourtip">
+                    <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-close-16"></use>
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+</div>
+    </highlight-code>
+
+    <h3>With footer</h3>
+    <p>
+        Tourtip also supports having a footer as well as an index in the case there are multiple tourtips on the page
+    </p>
+    <div class="demo">
+        <div class="demo__inner">
+            <div class="tourtip tourtip--expanded tourtip--js">
+                <p class="tourtip__host">
+                    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.
+                </p>
+                <div
+                    class="tourtip__overlay"
+                    role="region"
+                    aria-labelledby="tourtip-label"
+                >
+                    <span class="tourtip__pointer"/>
+                    <div class="tourtip__mask">
+                        <div class="tourtip__cell">
+                            <span class="tourtip__content">
+                                <h2 class="tourtip__heading" id="tourtip-label">
+                                    Tourtip
+                                </h2>
+                                <p>
+                                    Here's something new to help you be successful at your task.
+                                </p>
+                            </span>
+                            <button
+                                class="icon-btn icon-btn--transparent tourtip__close"
+                                type="button"
+                                aria-label="Dismiss tourtip"
+                            >
+                                <svg
+                                    class="icon icon--16"
+                                    height="16"
+                                    width="16"
+                                    aria-hidden="true"
+                                >
+                                    <icon-symbol name="close-16"/>
+                                </svg>
+                            </button>
+                            <div class="tourtip__footer">
+                                <span class="tourtip__index">
+                                    1 / 3
+                                </span>
+                                <button class="fake-link">
+                                    Back
+                                </button>
+                                <button class="btn btn--primary">
+                                    Next
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <highlight-code
+        type="html"
+        >
+<div class="tourtip tourtip--expanded">
+    <p class="tourtip__host">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.</p>
+    <div class="tourtip__overlay" style="left: calc(50% - 200px); right: auto; top: calc(100% + 12px); bottom: auto" role="region" aria-labelledby="tourtip-label">
+        <span class="tourtip__pointer"></span>
+        <div class="tourtip__mask">
+            <div class="tourtip__cell">
+                <span class="tourtip__content">
+                    <h2 class="tourtip__heading" id="tourtip-label">Tourtip</h2>
+                    <p>Here's something new to help you be successful at your task.</p>
+                </span>
+                <button class="icon-btn icon-btn--transparent tourtip__close" type="button" aria-label="Dismiss tourtip">
+                    <svg class="icon icon--16" height="16" width="16" aria-hidden="true">
+                        <use href="#icon-close-16"></use>
+                    </svg>
+                </button>
+                <div class="tourtip__footer">
+                    <span class="tourtip__index">1 / 3</span>
+                    <button class="fake-link">Back</button>
+                    <button class="btn btn--primary">Next</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+    </highlight-code>
+</div>
+export const metadata = {
+    "ds-component": {
+        name: "tourtip",
+        version: 2,
+    },
+    submodules: ["icon-button"],
+};

package/src/modules/typography.marko

@@ -0,0 +1,114 @@
+<div id="typography">
+    <section-header metadata=input.metadata name=input.name/>
+
+    <p>
+        Static sites without access to the LESS preprocessor can leverage the Skin type ramp via the typography module.
+    </p>
+    <p>
+        Giant text and large text are always bold. Other entries in the type ramp can be set to${" "}
+        <span class="highlight">
+            bold-text
+        </span>
+         or
+        <span class="highlight">
+            secondary-text
+        </span>
+         using the relevant class.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <ul class="demo-typography">
+                <li class="giant-text-3">
+                    .giant-text-3
+                </li>
+                <li class="giant-text-2">
+                    .giant-text-2
+                </li>
+                <li class="giant-text-1">
+                    .giant-text-1
+                </li>
+                <li class="large-text-2">
+                    .large-text-2
+                </li>
+                <li class="large-text-1">
+                    .large-text-1
+                </li>
+                <li class="medium-text">
+                    .medium-text
+                </li>
+                <li class="regular-text">
+                    .regular-text
+                </li>
+                <li class="small-text">
+                    .small-text
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <h3 id="typography-product-titles">
+        Product Titles
+    </h3>
+
+    <p>
+        Product titles are regular font weight, use the
+        <a href="#marketsans">
+            Market Sans
+        </a>
+         font and are responsive based on a small or large screen size.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <ul class="demo-typography">
+                <li class="giant-product-title">
+                    .giant-product-title
+                </li>
+                <li class="large-product-title">
+                    .large-product-title
+                </li>
+                <li class="medium-product-title">
+                    .medium-product-title
+                </li>
+                <li class="small-product-title">
+                    .small-product-title
+                </li>
+            </ul>
+        </div>
+    </div>
+
+    <h3 id="typography-section-titles">
+        Section Titles
+    </h3>
+
+    <p>
+        Section titles are bold font weight, use the
+        <a href="#marketsans">
+            Market Sans
+        </a>
+         font and are responsive based on a small or large screen size.
+    </p>
+
+    <div class="demo">
+        <div class="demo__inner">
+            <ul class="demo-typography">
+                <li class="giant-section-title">
+                    .giant-section-title
+                </li>
+                <li class="large-section-title">
+                    .large-section-title
+                </li>
+                <li class="medium-section-title">
+                    .medium-section-title
+                </li>
+                <li class="small-section-title">
+                    .small-section-title
+                </li>
+            </ul>
+        </div>
+    </div>
+</div>
+export const metadata = {
+    version: 1.1,
+};