@ebay/skin 17.5.0 → 18.0.0-next.0

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

@@ -1,180 +1,220 @@
 :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-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: var(--spacing-100);
-  box-shadow: 0 0 0 1px transparent;
-  color: var(--color-foreground-primary);
-  display: inline-flex;
-  font-size: var(--font-size-default);
-  justify-content: center;
-  margin-right: var(--spacing-100);
-  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 var(--spacing-200);
-  vertical-align: top;
+    background-color: var(--color-background-primary);
+    border: 1px solid var(--color-stroke-default);
+    border-radius: var(--spacing-100);
+    box-shadow: 0 0 0 1px transparent;
+    color: var(--color-foreground-primary);
+    display: inline-flex;
+    font-size: var(--font-size-default);
+    justify-content: center;
+    margin-right: var(--spacing-100);
+    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 var(--spacing-200);
+    vertical-align: top;
 }
 .toggle-button:focus-visible {
-  outline-offset: 1px;
-  outline-style: outset;
-  outline-width: 2px;
+    outline-offset: 1px;
+    outline-style: outset;
+    outline-width: 2px;
 }
+
 .toggle-button[aria-disabled="true"],
 .toggle-button[disabled] {
-  border-color: var(--color-stroke-disabled);
+    border-color: var(--color-stroke-disabled);
 }
+
 .toggle-button * {
-  pointer-events: none;
+    pointer-events: none;
 }
+
 .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;
+    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: 700;
 }
+
 .toggle-button[aria-disabled="true"][aria-pressed="true"],
 .toggle-button[disabled][aria-pressed="true"] {
-  border-color: var(--color-stroke-disabled);
-  box-shadow: 0 0 0 1px var(--color-stroke-disabled);
+    border-color: var(--color-stroke-disabled);
+    box-shadow: 0 0 0 1px var(--color-stroke-disabled);
 }
+
 .toggle-button:not([aria-disabled="true"], [disabled]):hover {
-  background-color: var(--state-layer-hover);
+    background-color: var(--state-layer-hover);
 }
+
 .toggle-button:not([aria-disabled="true"], [disabled]):active {
-  background-color: var(--state-layer-pressed);
+    background-color: var(--state-layer-pressed);
 }
+
 .toggle-button__content {
-  align-self: center;
-  display: flex;
-  flex-direction: column;
-  text-align: left;
+    align-self: center;
+    display: flex;
+    flex-direction: column;
+    text-align: left;
 }
-.toggle-button__icon {
-  margin-bottom: var(--spacing-200);
-  margin-right: var(--spacing-200);
-  margin-top: var(--spacing-200);
+
+.toggle-button__icon,
+.toggle-button__image-container {
+    margin-bottom: var(--spacing-200);
+    margin-right: var(--spacing-200);
+    margin-top: var(--spacing-200);
 }
+
 .toggle-button__image-container {
-  align-self: center;
-  margin-bottom: var(--spacing-200);
-  margin-right: var(--spacing-200);
-  margin-top: var(--spacing-200);
+    align-self: center;
 }
+
 .toggle-button__image-container svg.icon {
-  height: 100%;
+    height: 100%;
 }
+
 .toggle-button__image-container img {
-  height: 100%;
-  max-height: 56px;
-  max-width: 56px;
+    height: 100%;
+    max-height: 56px;
+    max-width: 56px;
 }
+
 .toggle-button__image {
-  display: inline-block;
-  height: 56px;
-  width: 56px;
+    display: inline-block;
+    height: 56px;
+    width: 56px;
 }
+
 .toggle-button__title {
-  font-size: var(--font-size-medium);
-  font-weight: bold;
-  line-height: var(--font-size-large-2);
-  margin-bottom: var(--spacing-50);
-  margin-top: var(--spacing-200);
+    font-size: var(--font-size-medium);
+    font-weight: 700;
+    line-height: var(--font-size-large-2);
+    margin-bottom: var(--spacing-50);
+    margin-top: var(--spacing-200);
 }
+
 .toggle-button__title:only-child {
-  margin-bottom: var(--spacing-200);
+    margin-bottom: var(--spacing-200);
 }
+
 .toggle-button[aria-disabled="true"] .toggle-button__title,
 .toggle-button[disabled] .toggle-button__title {
-  color: var(--color-foreground-disabled);
-}
-.toggle-button .toggle-button__content:only-child .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__content:only-child .toggle-button__title:only-child {
-  font-weight: normal;
-}
+    color: var(--color-foreground-disabled);
+}
+
+.toggle-button
+    .toggle-button__content:only-child
+    .toggle-button__title:only-child {
+    font-weight: 700;
+    margin-bottom: auto;
+    margin-top: auto;
+    text-align: center;
+    width: 100%;
+}
+
+.toggle-button:not([aria-pressed="true"])
+    .toggle-button__content:only-child
+    .toggle-button__title:only-child {
+    font-weight: 400;
+}
+
 .toggle-button__subtitle {
-  color: var(--color-foreground-secondary);
-  line-height: var(--font-size-large-1);
-  margin-bottom: var(--spacing-200);
+    color: var(--color-foreground-secondary);
+    line-height: var(--font-size-large-1);
+    margin-bottom: var(--spacing-200);
 }
+
 .toggle-button[aria-disabled="true"] .toggle-button__subtitle,
 .toggle-button[disabled] .toggle-button__subtitle {
-  color: var(--color-foreground-disabled);
+    color: var(--color-foreground-disabled);
 }
+
 .toggle-button__subtitle p {
-  margin: 0;
+    margin: 0;
 }
+
 .toggle-button[aria-pressed="true"] .toggle-button__subtitle {
-  color: var(--color-foreground-primary);
-  font-weight: normal;
+    color: var(--color-foreground-primary);
+    font-weight: 400;
 }
-.toggle-button[aria-disabled="true"][aria-pressed="true"] .toggle-button__subtitle,
+
+.toggle-button[aria-disabled="true"][aria-pressed="true"]
+    .toggle-button__subtitle,
 .toggle-button[disabled][aria-pressed="true"] .toggle-button__subtitle {
-  color: var(--color-foreground-disabled);
+    color: var(--color-foreground-disabled);
 }
-/* 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);
+    justify-content: left;
+    max-width: var(--toggle-button-list-width-max);
+    min-width: var(--toggle-button-list-width-min);
+}
+
+.toggle-button--list-layout .toggle-button__content,
+.toggle-button--list-layout .toggle-button__image-container {
+    align-self: self-start;
 }
+
 .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);
+    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;
+    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__icon,
+.toggle-button--gallery-layout .toggle-button__image-container {
+    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%;
+    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%;
-}
+    bottom: 0;
+    height: 100%;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 100%;
+}
+
 .toggle-button[aria-disabled="true"] .toggle-button__icon,
 .toggle-button[aria-disabled="true"] .toggle-button__image,
 .toggle-button[disabled] .toggle-button__icon,
 .toggle-button[disabled] .toggle-button__image {
-  filter: grayscale(1);
-  opacity: 0.5;
+    filter: grayscale(1);
+    opacity: 0.5;
 }
+
 .toggle-button--gallery-layout .toggle-button__image-container img {
-  height: 100%;
-  max-height: 200px;
-  max-width: initial;
+    height: 100%;
+    max-height: 200px;
+    max-width: none;
 }
+
 .toggle-button--gallery-layout .toggle-button__icon ~ .toggle-button__content {
-  align-self: flex-start;
+    align-self: flex-start;
 }
+
+/*# sourceMappingURL=toggle-button.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/toggle-button/toggle-button.scss","toggle-button.css"],"names":[],"mappings":"AAEA;EACI,+BAAA;EACA,8BAAA;EACA,+BAAA;EACA,oCAAA;EACA,oCAAA;EACA,uCAAA;EACA,uCAAA;ACMJ;;ADHA;EACI,gDAAA;EACA,4CAAA;EACA,gCAAA;EACA,gCAAA;EACA,qCAAA;EACA,mBAAA;EACA,kCAAA;EACA,sBAAA;EACA,+BAAA;EACA,eAAA;EACA,wCAAA;EACA,0CAAA;EACA,wCAAA;EACA,4BAAA;EACA,kBAAA;ACMJ;ADJI;EACI,kBAAA;EACA,oBAAA;EACA,iBAAA;ACMR;;ADFA;EAEI,yCAAA;ACKJ;;ADFA;EACI,mBAAA;ACKJ;;ADFA;EACI,kDAAA;EACA,2CAAA;EACA,+CAAA;EACA,eAAA;ACKJ;;ADHA;EAEI,yCAAA;EACA,iDAAA;ACMJ;;ADHA;EACI,yCAAA;ACMJ;;ADHA;EACI,2CAAA;ACMJ;;ADHA;EACI,iBAAA;EACA,YAAA;EACA,qBAAA;EACA,eAAA;ACMJ;;ADGA;EALI,gCAAA;EACA,+BAAA;EACA,6BAAA;ACaJ;;ADVA;EACI,iBAAA;ACSJ;;ADHA;EACI,WAAA;ACMJ;;ADHA;EACI,WAAA;EACA,eAAA;EACA,cAAA;ACMJ;;ADHA;EACI,oBAAA;EACA,WAAA;EACA,UAAA;ACMJ;;ADHA;EACI,iCAAA;EACA,eAAA;EACA,oCAAA;EACA,+BAAA;EACA,6BAAA;ACMJ;;ADHA;EACI,gCAAA;ACMJ;;ADHA;EAEI,sCAAA;ACMJ;;ADHA;EAGI,eAAA;EACA,kBAAA;EACA,eAAA;EACA,iBAAA;EACA,UAAA;ACIJ;;ADDA;EAGI,eAAA;ACEJ;;ADCA;EACI,uCAAA;EACA,oCAAA;EACA,gCAAA;ACEJ;;ADCA;EAEI,sCAAA;ACEJ;;ADCA;EACI,QAAA;ACEJ;;ADCA;EACI,qCAAA;EACA,eAAA;ACEJ;;ADCA;EAGI,sCAAA;ACCJ;ADGA;EACI,oBAAA;EACA,6CAAA;EACA,6CAAA;ACCJ;;ADEA;EAEI,qBAAA;ACCJ;;ADEA;EACI,qBAAA;EACA,oBAAA;EACA,gDAAA;EACA,gDAAA;ACCJ;;ADEA;EACI,qBAAA;ACCJ;;ADEA;EAEI,eAAA;EACA,cAAA;EACA,eAAA;ACCJ;;ADEA;EACI,kBAAA;EACA,iBAAA;EACA,iBAAA;EACA,UAAA;ACCJ;;ADEA;EACI,QAAA;EACA,WAAA;EACA,MAAA;EACA,iBAAA;EACA,OAAA;EACA,KAAA;EACA,UAAA;ACCJ;;ADEA;EAII,mBAAA;EACA,UAAA;ACCJ;;ADEA;EACI,WAAA;EACA,gBAAA;EACA,cAAA;ACCJ;;ADEA;EACI,qBAAA;ACCJ","file":"toggle-button.css"}