@ebay/skin 19.15.0 → 19.17.0

package/dist/switch/switch.css

@@ -1,3 +1,8 @@
+:root {
+    --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
+    --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
+}
+
 .switch {
     box-sizing: border-box;
     height: 40px;
@@ -19,7 +24,7 @@ span.switch__button {
         --switch-unchecked-background-color,
         var(--color-background-secondary)
     );
-    border-color: var(--switch-border-color, var(--color-stroke-strong));
+    border-color: var(--switch-border-color, var(--color-border-strong));
     border-radius: 400px;
     border-style: solid;
     border-width: 1px;
@@ -29,11 +34,13 @@ span.switch__button {
     text-indent: 100%;
     width: 40px;
 }
+
 span.switch__button,
 span.switch__button:after {
     height: 24px;
     transition: left 0.15s ease-out 0s;
 }
+
 span.switch__button:after {
     background-color: var(
         --switch-foreground-color,
@@ -41,7 +48,7 @@ span.switch__button:after {
     );
     border-color: var(
         --switch-foreground-border-color,
-        var(--color-stroke-strong)
+        var(--color-border-strong)
     );
     border-radius: 50%;
     border-style: solid;
@@ -67,21 +74,25 @@ span.switch__control {
     width: 40px;
     z-index: 1;
 }
+
 input.switch__control[disabled] + span.switch__button,
 span.switch__control[aria-disabled="true"] + span.switch__button {
-    border-color: var(--switch-border-color, var(--color-stroke-disabled));
+    border-color: var(--switch-border-color, var(--color-border-disabled));
 }
 
 input.switch__control {
     opacity: 0;
 }
+
 input.switch__control:focus + span.switch__button {
     outline: 1px auto
         var(--switch-custom-outline-color, var(--color-foreground-secondary));
 }
+
 input.switch__control:focus:not(:focus-visible) + span.switch__button {
     outline: none;
 }
+
 input.switch__control[disabled] + span.switch__button:after,
 span.switch__control[aria-disabled="true"] + span.switch__button:after {
     border-color: var(--switch-border-color, var(--color-background-disabled));
@@ -91,11 +102,24 @@ input.switch__control:not([disabled]):focus + span.switch__button,
 input.switch__control:not([disabled]):hover + span.switch__button,
 span.switch__control:not([aria-disabled="true"]):focus + span.switch__button,
 span.switch__control:not([aria-disabled="true"]):hover + span.switch__button {
-    background-color: var(
-        --switch-unchecked-hover-background-color,
-        var(--color-state-secondary-hover)
-    );
+    overflow: hidden;
+    position: relative;
 }
+
+input.switch__control:not([disabled]):focus + span.switch__button:before,
+input.switch__control:not([disabled]):hover + span.switch__button:before,
+span.switch__control:not([aria-disabled="true"]):focus
+    + span.switch__button:before,
+span.switch__control:not([aria-disabled="true"]):hover
+    + span.switch__button:before {
+    background-color: var(--color-state-layer-neutral);
+    background-color: var(--color-state-layer-hover);
+    content: "";
+    inset: 0;
+    pointer-events: none;
+    position: absolute;
+}
+
 input.switch__control:not([disabled]):checked + span.switch__button,
 span.switch__control:not([aria-disabled="true"])[aria-checked="true"]
     + span.switch__button {
@@ -104,6 +128,7 @@ span.switch__control:not([aria-disabled="true"])[aria-checked="true"]
         var(--color-background-accent)
     );
 }
+
 input.switch__control[disabled]:checked + span.switch__button,
 span.switch__control[aria-disabled="true"][aria-checked="true"]
     + span.switch__button {
@@ -119,24 +144,14 @@ span.switch__control:not([aria-disabled="true"]):focus-visible
     + span.switch__button {
     box-shadow:
         0 0 0 2px var(--color-background-primary),
-        0 0 0 4px var(--color-state-accent-hover);
+        0 0 0 4px var(--color-background-accent);
 }
 
-input.switch__control:not([disabled]):checked:focus + span.switch__button,
-input.switch__control:not([disabled]):checked:hover + span.switch__button,
-span.switch__control:not([aria-disabled="true"])[aria-checked="true"]:focus
-    + span.switch__button,
-span.switch__control:not([aria-disabled="true"])[aria-checked="true"]:hover
-    + span.switch__button {
-    background-color: var(
-        --switch-checked-hover-background-color,
-        var(--color-state-accent-hover)
-    );
-}
 input.switch__control:checked + span.switch__button:after,
 span.switch__control[aria-checked="true"] + span.switch__button:after {
     left: 15px;
 }
+
 span.switch__control:focus:not(:focus-visible) {
     outline: 0;
 }

package/dist/table/table.css

@@ -6,20 +6,16 @@
     scroll-snap-type: proximity;
     scroll-snap-type: x proximity;
 }
-
 .table::-webkit-scrollbar {
-    background-color: var(--color-background-faint);
+    background-color: var(--color-state-layer-focus);
     border-radius: 12px;
 }
-
 .table::-webkit-scrollbar:vertical {
     width: 6px;
 }
-
 .table::-webkit-scrollbar:horizontal {
     height: 6px;
 }
-
 .table::-webkit-scrollbar-thumb {
     background-color: var(--color-foreground-secondary);
     border-color: transparent;
@@ -27,17 +23,15 @@
     border-right-style: inset;
     box-shadow: none;
 }
-
 .table table {
     border-collapse: initial;
     border-spacing: 0;
     width: 100%;
 }
-
 .table td,
 .table th {
     background-color: var(--color-background-primary);
-    border-bottom: 1px solid var(--color-stroke-subtle);
+    border-bottom: 1px solid var(--color-border-subtle);
     box-sizing: border-box;
     height: 80px;
     max-height: 80px;
@@ -45,35 +39,29 @@
     min-width: 124px;
     padding: 12px;
 }
-
 .table th {
     white-space: nowrap;
 }
-
 .table--density-compact td,
 .table--density-compact th {
     height: 64px;
     max-height: 64px;
     padding: 12px;
 }
-
 .table--density-relaxed td,
 .table--density-relaxed th {
     height: 112px;
     max-height: 112px;
     padding: 16px;
 }
-
 .table--frozen-header {
     max-height: 90vh;
 }
-
 .table--frozen-header thead {
     position: sticky;
     top: 0;
     z-index: 3;
 }
-
 .table--freeze-column-1 tr td:nth-child(-n + 1),
 .table--freeze-column-1 tr th:nth-child(-n + 1),
 .table--freeze-column-2 tr td:nth-child(-n + 2),
@@ -84,15 +72,12 @@
     max-width: 124px;
     position: sticky;
 }
-
 .table--full-height {
     max-height: unset;
 }
-
 .table--constrained-height {
     max-height: 90vh;
 }
-
 .table th a,
 .table th button {
     align-items: center;
@@ -100,82 +85,66 @@
     font-weight: 700;
     text-decoration: none;
 }
-
 .table tbody tr:last-child td,
 .table tbody tr:last-child th {
     border-bottom: none;
 }
-
 .table-cell {
     text-align: left;
 }
-
 .table-cell--numeric,
 .table__cell--numeric {
     text-align: right;
 }
-
 .table-cell--icon-action {
     text-align: center;
     width: 64px;
 }
-
 .table [data-type="numeric"] {
     text-align: right;
 }
-
 .table-cell img {
     max-height: 56px;
     max-width: 56px;
 }
-
 .table--density-compact .table-cell img {
     max-height: 40px;
     max-width: 40px;
 }
-
 .table--density-relaxed .table-cell img {
     max-height: 72px;
     max-width: 72px;
 }
-
 .table th[scope="row"] {
     text-align: left;
 }
-
 .table td:last-child,
 .table th:last-child {
     padding-inline-end: 0;
 }
-
 .table--loading-state {
     overflow: hidden;
 }
-
 .table--loading-state table {
     opacity: 0.15;
     -webkit-user-select: none;
     user-select: none;
 }
-
 .table--loading-state .signal,
 .table--loading-state img {
     filter: var(--color-media-disabled-filter);
 }
-
 .table--loading-state a {
     cursor: default;
     pointer-events: none;
     text-decoration: none;
 }
-
 .table--loading-state .progress-bar-expressive {
     bottom: 50%;
     left: 0;
     position: absolute;
     right: 0;
 }
-
 .table--mode-selection td:first-child,
 .table--mode-selection th:first-child {
     min-width: 48px;
@@ -185,11 +154,9 @@
 .table--mode-selection tr:has(input:checked) :where(td, th) {
     background-color: var(--color-background-secondary);
 }
-
 .table tbody th {
     font-weight: 400;
 }
-
 .table thead button {
     background-color: initial;
     border: 1px solid transparent;
@@ -198,7 +165,7 @@
     color: inherit;
     display: inline-block;
     font-family: inherit;
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     margin: 0;
     min-height: 40px;
     min-width: auto;
@@ -209,19 +176,16 @@
     vertical-align: initial;
     white-space: nowrap;
 }
-
 .table-cell__data {
     line-height: var(--spacing-250);
     max-width: 400px;
     min-width: 124px;
 }
-
 .table-cell__data--secondary {
     color: var(--color-foreground-secondary);
-    font-size: var(--font-size-12);
+    font-size: var(--font-size-small);
     line-height: var(--spacing-200);
 }
-
 .table-cell__thumbnail {
     align-items: center;
     background-color: var(--color-background-tertiary);
@@ -234,61 +198,50 @@
     text-align: center;
     width: 56px;
 }
-
 .table--density-compact .table-cell__thumbnail {
     border-radius: 4px;
     height: 40px;
     width: 40px;
 }
-
 .table--density-relaxed .table-cell__thumbnail {
     border-radius: 8px;
     height: 72px;
     width: 72px;
 }
-
 .table-cell__layout {
     align-items: center;
     display: flex;
     gap: var(--spacing-200);
     width: max-content;
 }
-
 .table-cell__layout > * {
     flex-shrink: 0;
 }
-
 .table-cell__multiline {
     max-height: 80px;
     max-width: 304px;
 }
-
 .table--density-compact .table-cell__multiline {
     max-height: 64px;
     max-width: 320px;
 }
-
 .table--density-relaxed .table-cell__multiline {
     max-height: 112px;
     max-width: 272px;
 }
-
 .table-cell__layout .table-cell__multiline .table-cell__data {
     margin-block-end: var(--spacing-50);
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
-
 .table-cell .textbox,
 .table-cell .textbox__control {
     width: 100%;
 }
-
 .table-cell--numeric .textbox__control {
     text-align: right;
 }
-
 .table-cell .signal {
     white-space: nowrap;
 }

package/dist/tabs/tabs.css

@@ -10,7 +10,7 @@ span.tabs {
 
 div.tabs__items[role="tablist"],
 ul.fake-tabs__items {
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
 }
 
 ul.fake-tabs__items {
@@ -30,6 +30,7 @@ li.fake-tabs__item {
     position: relative;
     -webkit-tap-highlight-color: var(--color-background-secondary);
 }
+
 div.tabs__item[role="tab"]:not(:last-child),
 li.fake-tabs__item:not(:last-child) {
     margin-inline-end: var(--spacing-450);
@@ -49,6 +50,7 @@ li.fake-tabs__item > a {
     color: var(--tabs-item-foreground-color, var(--color-foreground-secondary));
     display: inline-block;
 }
+
 div.tabs__item[role="tab"] > span:after,
 li.fake-tabs__item > a:after {
     background-color: initial;
@@ -68,10 +70,12 @@ li.fake-tabs__item > a[aria-current] {
         var(--color-foreground-primary)
     );
 }
+
 div.tabs__item[role="tab"][aria-selected="true"] > span:after,
 li.fake-tabs__item > a[aria-current]:after {
     background-color: currentColor;
 }
+
 div.tabs__item[role="tab"]:focus:not(:focus-visible),
 li.fake-tabs__item a:focus:not(:focus-visible) {
     outline: none;
@@ -86,6 +90,7 @@ li.fake-tabs__item > a:not([aria-current]):hover {
         var(--color-foreground-secondary)
     );
 }
+
 div.tabs__item[role="tab"]:not([aria-selected="true"]):focus > span:after,
 div.tabs__item[role="tab"]:not([aria-selected="true"]):hover > span:after,
 li.fake-tabs__item > a:not([aria-current]):focus:after,

package/dist/textbox/textbox.css

@@ -9,26 +9,25 @@
         --textbox-background-color,
         var(--color-background-secondary)
     );
-    border-color: var(--textbox-border-color, var(--color-stroke-default));
+    border-color: var(--textbox-border-color, var(--color-border-medium));
     border-radius: var(--textbox-border-radius, var(--border-radius-50));
     border-style: solid;
     border-width: 1px;
     box-sizing: border-box;
-    color: var(
-        --textbox-foreground-color,
-        var(--color-foreground-on-secondary)
-    );
+    color: var(--textbox-foreground-color, var(--color-foreground-primary));
     display: inline-flex;
-    font-size: var(--font-size-default);
+    font-size: var(--font-size-body);
     gap: var(--spacing-100);
     overflow: hidden;
     position: relative;
     width: fit-content;
 }
+
 .textbox button.icon-btn {
     background-color: initial;
     padding: 0;
 }
+
 .textbox--focus,
 .textbox:has(> .textbox__control:focus):not(.textbox--readonly):not(
         :has(> .textbox__control[readonly])
@@ -37,14 +36,16 @@
         --textbox-focus-background-color,
         var(--color-background-primary)
     );
-    border-color: var(--textbox-focus-border-color, var(--color-stroke-strong));
-    box-shadow: 0 0 0 1px var(--color-stroke-strong);
+    border-color: var(--textbox-focus-border-color, var(--color-border-strong));
+    box-shadow: 0 0 0 1px var(--color-border-strong);
 }
+
 .textbox--readonly,
 .textbox:has(> .textbox__control[readonly]) {
     background-color: initial;
     border: none;
 }
+
 .textbox--disabled,
 .textbox:has(> .textbox__control[disabled]) {
     border-color: var(
@@ -56,11 +57,12 @@
         var(--color-foreground-disabled)
     );
 }
+
 .textbox--invalid,
 .textbox:has(> .textbox__control[aria-invalid="true"]) {
     border-color: var(
         --textbox-invalid-border-color,
-        var(--color-stroke-attention)
+        var(--color-border-attention)
     );
 }
 
@@ -104,6 +106,7 @@ textarea.textbox__control {
     margin: 0;
     outline: none;
 }
+
 input.textbox__control[disabled],
 textarea.textbox__control[disabled] {
     border-color: var(
@@ -115,6 +118,7 @@ textarea.textbox__control[disabled] {
         var(--color-foreground-disabled)
     );
 }
+
 input.textbox__control[disabled]::-webkit-input-placeholder,
 textarea.textbox__control[disabled]::-webkit-input-placeholder {
     color: var(
@@ -122,6 +126,7 @@ textarea.textbox__control[disabled]::-webkit-input-placeholder {
         var(--color-foreground-ghost)
     );
 }
+
 input.textbox__control[disabled]::-moz-placeholder,
 textarea.textbox__control[disabled]::-moz-placeholder {
     color: var(
@@ -129,6 +134,7 @@ textarea.textbox__control[disabled]::-moz-placeholder {
         var(--color-foreground-ghost)
     );
 }
+
 input.textbox__control[disabled]:-ms-input-placeholder,
 textarea.textbox__control[disabled]:-ms-input-placeholder {
     color: var(
@@ -136,13 +142,15 @@ textarea.textbox__control[disabled]:-ms-input-placeholder {
         var(--color-foreground-ghost)
     );
 }
+
 input.textbox__control[aria-invalid="true"],
 textarea.textbox__control[aria-invalid="true"] {
     border-color: var(
         --textbox-invalid-foreground-color,
-        var(--color-stroke-attention)
+        var(--color-border-attention)
     );
 }
+
 input.textbox__control::placeholder,
 textarea.textbox__control::placeholder {
     color: var(--textbox-placeholder-color, var(--color-foreground-secondary));