@ebay/skin 16.3.0 → 16.4.0-0

package/dist/textbox/textbox.css

@@ -107,7 +107,7 @@ input.textbox__control--large {
 }
 input.textbox__control:not(:read-only):focus,
 textarea.textbox__control:not(:read-only):focus {
-  border-color: var(--textbox-focus-border-color, var(--color-stroke-default));
+  border-color: var(--textbox-focus-border-color, var(--color-stroke-strong));
   background-color: var(--textbox-focus-background-color, var(--color-background-primary));
   outline: 0;
 }

package/dist/toggle-button/toggle-button.css

@@ -0,0 +1,140 @@
+:root {
+  --toggle-button-height-min: 72px;
+  --toggle-button-width-min: 72px;
+  --toggle-button-width-max: 342px;
+  --toggle-button-list-width-min: 224px;
+  --toggle-button-list-width-max: 342px;
+  --toggle-button-gallery-width-min: 168px;
+  --toggle-button-gallery-width-max: 342px;
+}
+.toggle-button {
+  background-color: var(--color-background-primary);
+  border: 1px solid var(--color-stroke-default);
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px transparent;
+  color: var(--color-foreground-primary);
+  display: inline-flex;
+  font-size: 0.875rem;
+  justify-content: center;
+  margin-right: 8px;
+  margin-top: auto;
+  max-width: var(--toggle-button-width-max);
+  min-height: var(--toggle-button-height-min);
+  min-width: var(--toggle-button-width-min);
+  padding: 0 16px;
+  vertical-align: top;
+}
+.toggle-button:focus-visible {
+  outline-offset: 1px;
+  outline-style: outset;
+  outline-width: 2px;
+}
+.toggle-button[aria-pressed="true"] {
+  background-color: var(--color-background-secondary);
+  border: 1px solid var(--color-stroke-strong);
+  box-shadow: 0 0 0 1px var(--color-stroke-strong);
+  font-weight: bold;
+}
+.toggle-button__content {
+  align-self: center;
+  display: flex;
+  flex-direction: column;
+  text-align: left;
+}
+.toggle-button__icon {
+  margin-bottom: 16px;
+  margin-right: 16px;
+  margin-top: 16px;
+}
+.toggle-button__image-container {
+  align-self: center;
+  margin-bottom: 16px;
+  margin-right: 16px;
+  margin-top: 16px;
+}
+.toggle-button__image-container svg.icon {
+  height: 100%;
+}
+.toggle-button__image-container img {
+  height: 100%;
+  max-height: 56px;
+  max-width: 56px;
+}
+.toggle-button__image {
+  display: inline-block;
+  height: 56px;
+  width: 56px;
+}
+.toggle-button__title {
+  font-size: 1rem;
+  font-weight: bold;
+  line-height: 1.5rem;
+  margin-bottom: 4px;
+  margin-top: 16px;
+}
+.toggle-button .toggle-button__content .toggle-button__title:only-child {
+  font-weight: bold;
+  margin-bottom: auto;
+  margin-top: auto;
+  text-align: center;
+  width: 100%;
+}
+.toggle-button:not([aria-pressed="true"]) .toggle-button__title:only-child {
+  font-weight: normal;
+}
+.toggle-button__subtitle {
+  color: var(--color-foreground-secondary);
+  line-height: 1.25rem;
+  margin-bottom: 16px;
+}
+.toggle-button__subtitle p {
+  margin: 0;
+}
+.toggle-button[aria-pressed="true"] .toggle-button__subtitle {
+  color: var(--color-foreground-primary);
+  font-weight: normal;
+}
+/* Layout Themes */
+.toggle-button--list-layout {
+  justify-content: left;
+  max-width: var(--toggle-button-list-width-max);
+  min-width: var(--toggle-button-list-width-min);
+}
+.toggle-button--gallery-layout {
+  flex-direction: column;
+  justify-content: left;
+  max-width: var(--toggle-button-gallery-width-max);
+  min-width: var(--toggle-button-gallery-width-min);
+}
+.toggle-button--gallery-layout .toggle-button__content {
+  align-self: self-start;
+}
+.toggle-button--gallery-layout .toggle-button__image-container,
+.toggle-button--gallery-layout .toggle-button__icon {
+  margin-bottom: 0;
+  margin-right: 0;
+  text-align: left;
+}
+.toggle-button--gallery-layout .toggle-button__image-container {
+  padding-bottom: 60%;
+  position: relative;
+  text-align: center;
+  width: 100%;
+}
+.toggle-button--gallery-layout .toggle-button__image {
+  bottom: 0;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+}
+.toggle-button--gallery-layout .toggle-button__image-container img {
+  height: 100%;
+  max-height: 200px;
+  max-width: initial;
+}
+.toggle-button--gallery-layout .toggle-button__icon ~ .toggle-button__content {
+  align-self: flex-start;
+}

package/index.browser.json

@@ -55,6 +55,7 @@
     "require: ./tabs.js",
     "require: ./textbox.js",
     "require: ./toast-dialog.js",
+    "require: ./toggle-button.js",
     "require: ./tooltip.js",
     "require: ./tourtip.js",
     "require: ./typography.js",

package/index.css

@@ -53,6 +53,7 @@
 @import "./tabs.css";
 @import "./textbox.css";
 @import "./toast-dialog.css";
+@import "./toggle-button.css";
 @import "./tooltip.css";
 @import "./tourtip.css";
 @import "./typography.css";

package/index.js

@@ -53,6 +53,7 @@ require('./switch.js');
 require('./tabs.js');
 require('./textbox.js');
 require('./toast-dialog.js');
+require('./toggle-button.js');
 require('./tooltip.js');
 require('./tourtip.js');
 require('./typography.js');

package/index.mjs

@@ -53,6 +53,7 @@ import './switch.css';
 import './tabs.css';
 import './textbox.css';
 import './toast-dialog.css';
+import './toggle-button.css';
 import './tooltip.css';
 import './tourtip.css';
 import './typography.css';

package/package.json

@@ -1,7 +1,7 @@
 {
     "name": "@ebay/skin",
     "description": "Skin - CSS modules that represent the brand eBay",
-    "version": "16.3.0",
+    "version": "16.4.0-0",
     "license": "MIT",
     "main": "./index.js",
     "maintainers": [

package/scripts/README.md

@@ -35,7 +35,7 @@ In order to view all the avaialbe options and subcommands you can run `scripts b
 
 ## gen
 
-Generates top level improts. See `generate-imports/README.md`
+Generates top level imports. See `generate-imports/README.md`
 This creates multiple files. We create a `{module}.browser.json` a `{module}.js` a `{module}.css` and a `{module}.mjs` file, where the module is each skin module.
 These are easy improts to all dist files, which include all of each of the modules dependencies.
 A js file is included as a way to import in any bundler (`lasso`, `wepack`, or `vite`). This allows a common way for bundlers to import the modules and not duplicate any imports. However, CSS and MJS files are also available if needed for different bundlers or imports directly form less files or module imports.

package/scripts/generate-images.js

@@ -132,7 +132,10 @@ class GenerateImages {
         const symbol = symbols.querySelector("svg");
 
         const nameObj = stripName(filename);
-        if (config.skipDocs.indexOf(nameObj.simpleName) === -1) {
+        if (
+            config.skipDocs.indexOf(nameObj.simpleName) === -1 &&
+            config.deprecated.indexOf(nameObj.simpleName) === -1
+        ) {
             this.imageList.push(nameObj.fullName);
         }
 

package/src/less/bundles/skin-headless.less

@@ -55,6 +55,7 @@
 @import "../tabs/tabs.less";
 @import "../textbox/textbox.less";
 @import "../toast-dialog/toast-dialog.less";
+@import "../toggle-button/toggle-button.less";
 @import "../tooltip/tooltip.less";
 @import "../tourtip/tourtip.less";
 @import "../typography/typography.less";

package/src/less/button/button.less

@@ -7,11 +7,11 @@ a.fake-btn {
     .btn-base();
 
     background-color: transparent;
-    border-radius: var(--btn-border-radius, calc(@button-height-small / 2));
+    border-radius: var(--btn-border-radius, calc(@button-height-regular / 2));
     color: inherit;
     display: inline-block;
     font-size: @font-size-regular;
-    min-height: @button-height-small;
+    min-height: @button-height-regular;
     min-width: 88px;
     padding: @button-padding-vertical @button-padding-horizontal;
 }
@@ -46,7 +46,7 @@ a.fake-btn--borderless[aria-disabled="true"] {
 
 button.btn--slim,
 a.fake-btn--slim {
-    height: @button-height-small;
+    height: @button-height-regular;
     min-width: auto;
     padding-left: @spacing-100;
     padding-right: @spacing-100;
@@ -178,6 +178,11 @@ a.fake-btn--large svg.icon {
     max-height: @button-height-large - (@button-padding-vertical-large * 2);
 }
 
+button.btn--small svg.icon,
+a.fake-btn--small svg.icon {
+    max-height: @button-height-xsmall - (@button-padding-vertical-small * 2);
+}
+
 button.btn--primary[disabled],
 button.btn--primary[aria-disabled="true"] {
     .background-color-token(btn-primary-disabled-background-color, color-foreground-disabled);
@@ -329,10 +334,15 @@ button.btn--tertiary.btn--destructive .progress-spinner {
 
 button.btn--large,
 a.fake-btn--large {
-    border-radius: var(--btn-border-radius, calc(@button-height-large / 2));
-    font-size: @font-size-medium;
-    min-height: @button-height-large;
-    padding: @button-padding-vertical-large @button-padding-horizontal;
+    .btn-large();
+}
+
+button.btn--small,
+a.fake-btn--small {
+    border-radius: var(--btn-border-radius, calc(@button-height-xsmall / 2));
+    font-size: @font-size-regular;
+    min-height: @button-height-xsmall;
+    padding: @button-padding-vertical-small @button-padding-horizontal-small;
 }
 
 button.btn--form,
@@ -355,6 +365,10 @@ button.btn--form.btn--large {
     padding: @button-padding-vertical-large @button-padding-horizontal-large;
 }
 
+button.btn--form.btn--small {
+    padding: @button-padding-vertical-small @button-padding-horizontal-small;
+}
+
 button.btn--transparent,
 a.fake-btn--transparent {
     background-color: transparent;

package/src/less/button/stories/button/dimensions.stories.js

@@ -9,6 +9,21 @@ export const large = () => `
 </button>
 `;
 
+export const small = () => `
+<button type="button" class="btn btn--small">
+    <span class="btn__cell">
+        <svg class="icon icon--settings-16" width="16" height="16"><use href="#icon-settings-16"></use></svg>
+        <span>Button</span>
+    </span>
+</button>
+`;
+
+export const formLarge = () =>
+    '<button class="btn btn--form btn--large">Button</button>';
+
+export const formSmall = () =>
+    '<button class="btn btn--form btn--small">Button</button>';
+
 export const fluid = () => '<button class="btn btn--fluid">Button</button>';
 
 export const fixedWidth = () => `

package/src/less/cta-button/cta-button.less

@@ -7,7 +7,10 @@ a.cta-btn {
 
     .background-color-token(cta-btn-background-color, color-background-primary);
     border-color: currentColor;
-    border-radius: var(--cta-btn-border-radius, calc(@button-height-small / 2));
+    border-radius: var(
+        --cta-btn-border-radius,
+        calc(@button-height-regular / 2)
+    );
     .color-token(cta-btn-foreground-color, color-foreground-primary);
     display: inline-block;
     font-size: @font-size-regular;