@ebay/skin 17.5.0 → 18.0.0-next.0

package/dist/field/field.css

@@ -1,124 +1,158 @@
 span.field {
-  display: inline-block;
+    display: inline-block;
 }
+
 span.field + span.field {
-  margin-left: 8px;
+    margin-left: 8px;
 }
+
+.field-group,
 div.field {
-  margin: 16px 0;
+    margin: 16px 0;
 }
+
 .field-group {
-  display: flex;
-  margin: 16px 0;
+    display: flex;
 }
 .field-group > div.field {
-  margin: 0;
+    margin: 0;
 }
 span.field--table {
-  display: inline-table;
+    display: inline-table;
 }
+
 div.field--table {
-  display: table;
+    display: table;
 }
+
 .field__description--group {
-  display: flex;
-  justify-content: flex-end;
+    display: flex;
+    justify-content: flex-end;
 }
+
 .field__description--group > :last-child {
-  -webkit-margin-start: 5px;
-          margin-inline-start: 5px;
-  text-align: right;
+    -webkit-margin-start: 5px;
+    margin-inline-start: 5px;
+    text-align: right;
 }
+
 .field__description--group > :first-child {
-  flex: 1;
+    flex: 1;
 }
 .field__label {
-  margin-right: 8px;
+    margin-right: 8px;
 }
+
 .field__description {
-  color: var(--field-description-color, var(--color-foreground-secondary));
-  font-size: var(--font-size-small);
-  line-height: var(--spacing-200);
-  margin-top: var(--spacing-50);
+    color: var(--field-description-color, var(--color-foreground-secondary));
+    font-size: var(--font-size-small);
+    line-height: var(--spacing-200);
+    margin-top: var(--spacing-50);
 }
+
 .field__description--confirmation {
-  color: var(--field-description-confirmation-color, var(--color-foreground-confirmation));
+    color: var(
+        --field-description-confirmation-color,
+        var(--color-foreground-confirmation)
+    );
 }
+
 .field__description--information {
-  color: var(--field-description-information-color, var(--color-foreground-information));
+    color: var(
+        --field-description-information-color,
+        var(--color-foreground-information)
+    );
 }
+
 .field__description--attention {
-  color: var(--field-description-attention-color, var(--color-foreground-attention));
+    color: var(
+        --field-description-attention-color,
+        var(--color-foreground-attention)
+    );
 }
+
 .field__group > .field__description,
 .field__group > .field__label {
-  align-self: center;
+    align-self: center;
 }
+
 span.field__group {
-  display: inline-flex;
+    display: inline-flex;
 }
+
 div.field__group {
-  display: flex;
+    display: flex;
 }
+
 .field__control + span.field__description {
-  margin-left: 8px;
+    margin-left: 8px;
 }
+
 .field__description .icon {
-  display: inline-block;
-  margin-right: var(--spacing-50);
+    display: inline-block;
+    margin-right: var(--spacing-50);
 }
 div.field__description {
-  margin: var(--spacing-100) 0 0;
+    margin: var(--spacing-100) 0 0;
 }
+
 .field__row {
-  display: table-row;
+    display: table-row;
 }
 .field__row > .field__control,
-.field__row > .field__label,
-.field__row > .field__description {
-  display: table-cell;
+.field__row > .field__description,
+.field__row > .field__label {
+    display: table-cell;
 }
 .field__row .field__label {
-  margin-right: auto;
-  padding-right: 8px;
+    margin-right: auto;
+    padding-right: 8px;
 }
 .field__row .field__control + span.field__description {
-  margin-left: 0;
-  padding-left: 8px;
+    margin-left: 0;
+    padding-left: 8px;
 }
 .field__row:first-child > .field__description {
-  padding-bottom: 8px;
+    padding-bottom: 8px;
 }
 .field__row:last-child > .field__description {
-  padding-top: 8px;
+    padding-top: 8px;
 }
 .field__label--end {
-  margin-left: 4px;
-  margin-right: auto;
+    margin-left: 4px;
+    margin-right: auto;
 }
+
 .field__label--stacked {
-  display: block;
-  margin-bottom: 8px;
+    display: block;
+    margin-bottom: 8px;
 }
+
 .field__label--disabled {
-  color: var(--field-label-color-disabled, var(--color-foreground-disabled));
+    color: var(--field-label-color-disabled, var(--color-foreground-disabled));
 }
+
 .field--fluid,
-.field__group--fluid,
-.field__control--fluid {
-  width: 100%;
+.field__control--fluid,
+.field__group--fluid {
+    width: 100%;
 }
 .field--align-top .field__label {
-  display: inline-block;
-  margin-top: 16px;
+    display: inline-block;
+    margin-top: 16px;
 }
+
 .field--align-top .textbox {
-  vertical-align: top;
+    vertical-align: top;
 }
+
 .field__group--align-top > .field__label {
-  align-self: flex-start;
-  margin-top: 16px;
+    align-self: flex-start;
+    margin-top: 16px;
 }
+
 [dir="rtl"] .field__description--group > :last-child {
-  text-align: left;
+    text-align: left;
 }
+
+/*# sourceMappingURL=field.css.map */

package/dist/field/field.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/field/field.scss","field.css","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAKA;EACI,oBAAA;ACIJ;;ADDA;EACI,eAAA;ACIJ;;ADGA;EAHI,aAAA;ACSJ;;ADNA;EACI,YAAA;ACKJ;ADFI;EACI,QAAA;ACIR;ADEA;EACI,oBAAA;ACEJ;;ADCA;EACI,aAAA;ACEJ;;ADCA;EACI,YAAA;EACA,wBAAA;ACEJ;;ADCA;EACI,wBAAA;UAAA,uBAAA;EACA,gBAAA;ACEJ;;ADCA;EACI,MAAA;ACEJ;ADGA;EACI,gBAAA;ACCJ;;ADEA;EEtDQ,uEAAA;EFyDJ,gCAAA;EACA,8BAAA;EACA,4BAAA;ACAJ;;ADGA;EE9DQ,uFAAA;AD+DR;;ADMA;EErEQ,qFAAA;ADmER;;ADSA;EE5EQ,iFAAA;ADuER;;ADYA;EAEI,iBAAA;ACTJ;;ADYA;EACI,mBAAA;ACTJ;;ADYA;EACI,YAAA;ACTJ;;ADYA;EACI,eAAA;ACTJ;;ADYA;EACI,oBAAA;EACA,8BAAA;ACTJ;ADaA;EACI,6BAAA;ACTJ;;ADYA;EACI,iBAAA;ACTJ;ADWI;EAGI,kBAAA;ACTR;ADYI;EACI,iBAAA;EACA,iBAAA;ACVR;ADaI;EACI,aAAA;EACA,gBAAA;ACXR;ADeQ;EACI,kBAAA;ACbZ;ADkBQ;EACI,eAAA;AChBZ;ADuBA;EACI,eAAA;EACA,iBAAA;ACnBJ;;ADsBA;EACI,aAAA;EACA,iBAAA;ACnBJ;;ADsBA;EE1JQ,yEAAA;ADwIR;;ADsBA;EAGI,UAAA;ACnBJ;ADwBA;EACI,oBAAA;EACA,eAAA;ACpBJ;;ADuBA;EACI,kBAAA;ACpBJ;;ADuBA;EACI,qBAAA;EACA,eAAA;ACpBJ;;ADwBI;EACI,eAAA;ACrBR","file":"field.css"}

package/dist/filter-button/filter-button.css

@@ -1,102 +1,142 @@
 div.filter-group {
-  display: flex;
-  flex-wrap: wrap;
+    display: flex;
+    flex-wrap: wrap;
 }
-button.filter-button,
-a.filter-link {
-  align-items: center;
-  border: 1px solid transparent;
-  border-radius: 16px;
-  box-sizing: border-box;
-  color: var(--filter-button-foreground-color, var(--color-foreground-primary));
-  display: inline-flex;
-  flex: 0 1 auto;
-  flex-direction: column;
-  font-family: inherit;
-  font-size: var(--font-size-default);
-  height: 32px;
-  justify-content: center;
-  margin: 0;
-  max-width: 280px;
-  min-width: 56px;
-  padding: 0 var(--spacing-200);
-  text-align: center;
-  text-decoration: none;
-  vertical-align: bottom;
-  background-color: var(--filter-button-background-color, var(--color-background-secondary));
-  border-color: var(--filter-button-selected-border-color, var(--color-stroke-default));
+
+a.filter-link,
+button.filter-button {
+    align-items: center;
+    background-color: var(
+        --filter-button-background-color,
+        var(--color-background-secondary)
+    );
+    border: 1px solid transparent;
+    border-color: var(
+        --filter-button-selected-border-color,
+        var(--color-stroke-default)
+    );
+    border-radius: 16px;
+    box-sizing: border-box;
+    color: var(
+        --filter-button-foreground-color,
+        var(--color-foreground-primary)
+    );
+    display: inline-flex;
+    flex: 0 1 auto;
+    flex-direction: column;
+    font-family: inherit;
+    font-size: var(--font-size-default);
+    height: 32px;
+    justify-content: center;
+    margin: 0;
+    max-width: 280px;
+    min-width: 56px;
+    padding: 0 var(--spacing-200);
+    text-align: center;
+    text-decoration: none;
+    vertical-align: bottom;
 }
-button.filter-button + button.filter-button,
-button.filter-button + a.filter-link,
+a.filter-link + a.filter-link,
 a.filter-link + button.filter-button,
-a.filter-link + a.filter-link {
-  margin-left: 8px;
+button.filter-button + a.filter-link,
+button.filter-button + button.filter-button {
+    margin-left: 8px;
 }
-button.filter-button:focus,
+a.filter-link:active,
 a.filter-link:focus,
-button.filter-button:hover,
 a.filter-link:hover,
 button.filter-button:active,
-a.filter-link:active {
-  background-color: var(--filter-button-background-color, var(--color-state-secondary-hover));
+button.filter-button:focus,
+button.filter-button:hover {
+    background-color: var(
+        --filter-button-background-color,
+        var(--color-state-secondary-hover)
+    );
 }
-button.filter-button .filter-button__cell,
-a.filter-link .filter-link__cell {
-  display: inline-block;
-  max-width: 258px;
-  overflow: hidden;
-  pointer-events: none;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+a.filter-link .filter-link__cell,
+button.filter-button .filter-button__cell {
+    display: inline-block;
+    max-width: 258px;
+    overflow: hidden;
+    pointer-events: none;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
+
 a.filter-link:visited {
-  color: var(--filter-button-foreground-color, var(--color-foreground-primary));
+    color: var(
+        --filter-button-foreground-color,
+        var(--color-foreground-primary)
+    );
 }
-button.filter-button[aria-pressed="true"],
-a.filter-link--selected {
-  border-color: var(--filter-button-selected-border-color, var(--color-stroke-strong));
-  font-weight: bold;
+
+a.filter-link--selected,
+button.filter-button[aria-pressed="true"] {
+    font-weight: 700;
 }
-a.filter-link--selected:visited {
-  border-color: var(--filter-button-selected-border-color, var(--color-stroke-strong));
+
+a.filter-link--selected,
+a.filter-link--selected:visited,
+button.filter-button[aria-pressed="true"] {
+    border-color: var(
+        --filter-button-selected-border-color,
+        var(--color-stroke-strong)
+    );
 }
-button.filter-button[disabled],
-button.filter-button[aria-disabled="true"],
-button.filter-button[aria-pressed="true"][disabled],
-button.filter-button[aria-pressed="true"][aria-disabled="true"],
+
+a.filter-link--selected:not([href]),
+a.filter-link--selected[aria-disabled="true"],
 a.filter-link:not([href]),
 a.filter-link[aria-disabled="true"],
-a.filter-link--selected:not([href]),
-a.filter-link--selected[aria-disabled="true"] {
-  color: var(--filter-button-disabled-foreground-color, var(--color-foreground-disabled));
-  font-weight: normal;
+button.filter-button[aria-disabled="true"],
+button.filter-button[aria-pressed="true"][aria-disabled="true"],
+button.filter-button[aria-pressed="true"][disabled],
+button.filter-button[disabled] {
+    color: var(
+        --filter-button-disabled-foreground-color,
+        var(--color-foreground-disabled)
+    );
+    font-weight: 400;
 }
-button.filter-button[disabled]:hover,
-button.filter-button[aria-disabled="true"]:hover,
-button.filter-button[aria-pressed="true"][disabled]:hover,
-button.filter-button[aria-pressed="true"][aria-disabled="true"]:hover,
-a.filter-link:not([href]):hover,
-a.filter-link[aria-disabled="true"]:hover,
+a.filter-link--selected:not([href]):focus,
 a.filter-link--selected:not([href]):hover,
+a.filter-link--selected[aria-disabled="true"]:focus,
 a.filter-link--selected[aria-disabled="true"]:hover,
-button.filter-button[disabled]:focus,
-button.filter-button[aria-disabled="true"]:focus,
-button.filter-button[aria-pressed="true"][disabled]:focus,
-button.filter-button[aria-pressed="true"][aria-disabled="true"]:focus,
 a.filter-link:not([href]):focus,
+a.filter-link:not([href]):hover,
 a.filter-link[aria-disabled="true"]:focus,
-a.filter-link--selected:not([href]):focus,
-a.filter-link--selected[aria-disabled="true"]:focus {
-  background-color: var(--filter-button-background-color, var(--color-background-secondary));
-  color: var(--filter-button-disabled-foreground-color, var(--color-foreground-disabled));
-}
-button.filter-button[aria-pressed="true"][disabled]:hover,
+a.filter-link[aria-disabled="true"]:hover,
+button.filter-button[aria-disabled="true"]:focus,
+button.filter-button[aria-disabled="true"]:hover,
+button.filter-button[aria-pressed="true"][aria-disabled="true"]:focus,
 button.filter-button[aria-pressed="true"][aria-disabled="true"]:hover,
+button.filter-button[aria-pressed="true"][disabled]:focus,
+button.filter-button[aria-pressed="true"][disabled]:hover,
+button.filter-button[disabled]:focus,
+button.filter-button[disabled]:hover {
+    background-color: var(
+        --filter-button-background-color,
+        var(--color-background-secondary)
+    );
+    color: var(
+        --filter-button-disabled-foreground-color,
+        var(--color-foreground-disabled)
+    );
+}
+
 a.filter-link--selected:not([href]):hover,
-a.filter-link--selected[aria-disabled="true"]:hover {
-  background-color: var(--filter-button-selected-background-color, var(--color-state-secondary-hover));
+a.filter-link--selected[aria-disabled="true"]:hover,
+button.filter-button[aria-pressed="true"][aria-disabled="true"]:hover,
+button.filter-button[aria-pressed="true"][disabled]:hover {
+    background-color: var(
+        --filter-button-selected-background-color,
+        var(--color-state-secondary-hover)
+    );
 }
 a.filter-link:focus:not(:focus-visible),
 button.filter-button:focus:not(:focus-visible) {
-  outline: none;
+    outline: none;
 }
+
+/*# sourceMappingURL=filter-button.css.map */

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sass/filter-button/filter-button.scss","filter-button.css","../../src/sass/mixins/private/_filter-button-mixins.scss","../../src/sass/mixins/private/_token-mixins.scss"],"names":[],"mappings":"AAMA;EACI,YAAA;EACA,cAAA;ACIJ;;ADDA;EEVI,kBAAA;ECCI,yFAAA;EDAJ,4BAAA;ECAI,oFAAA;EDCJ,kBAAA;EACA,qBAAA;ECFI,4EAAA;EDQJ,mBAAA;EACA,aAAA;EACA,qBAAA;EACA,mBAAA;EACA,kCAAA;EACA,WAAA;EACA,sBAAA;EACA,QAAA;EACA,eAAA;EACA,cAAA;EACA,4BAAA;EACA,iBAAA;EACA,oBAAA;EACA,qBAAA;ADcJ;ACZI;EACI,eAAA;ADiBR;ADnBI;EGtBI,0FAAA;AF+CR;;ADfA;EAEI,oBAAA;EACA,eAAA;EACA,eAAA;EACA,mBAAA;EACA,sBAAA;EACA,kBAAA;ACkBJ;;ADfA;EG1CQ,4EAAA;AF6DR;;ADZA;EAOI,eAAA;ACWJ;;ADRA;EG3DQ,mFAAA;AFuER;;ADLA;EGlEQ,sFAAA;EH+EJ,eAAA;ACKJ;ADFI;EGlFI,yFAAA;EAAA,sFAAA;AFsGR;;ADPA;EG/FQ,mGAAA;AF6GR;ADHA;EAEI,YAAA;ACOJ","file":"filter-button.css"}