@ebay/skin 18.2.4 → 18.3.0

package/dist/table/table.css

@@ -1,9 +1,3 @@
-:root {
-    --density-compact-cell-height: 36px;
-    --density-default-cell-height: 48px;
-    --density-relaxed-cell-height: 56px;
-}
-
 .table {
     overflow-x: auto;
     position: relative;
@@ -20,43 +14,205 @@
     background-color: var(--color-background-primary);
     border-bottom: 1px solid var(--color-stroke-subtle);
     box-sizing: border-box;
-    height: var(--density-default-cell-height);
+    height: 80px;
+    max-height: 80px;
     max-width: 400px;
     min-width: 124px;
-    padding-block: var(--spacing-100);
-    padding-inline: var(--spacing-200);
+    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 th button {
+    font-weight: 700;
+}
+
+.table tbody tr:last-child td,
+.table tbody tr:last-child th {
+    border-bottom: none;
+}
+
+.table-cell {
+    text-align: left;
+}
+
+.table-cell--numeric {
+    text-align: right;
+}
 .table__cell {
     text-align: left;
 }
 
-.table [data-type="numeric"],
 .table__cell--numeric {
     text-align: right;
 }
 
-.table td:last-child,
-.table th:last-child {
-    -webkit-padding-end: 0;
-    padding-inline-end: 0;
+.table-cell--icon-action {
+    text-align: center;
+    width: 64px;
 }
 
-.table--density-compact td,
-.table--density-compact th {
-    height: var(--density-compact-cell-height);
+.table [data-type="numeric"] {
+    text-align: right;
 }
 
-.table--density-relaxed td,
-.table--density-relaxed th {
-    height: var(--density-relaxed-cell-height);
+.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--mode-selection td:first-child,
 .table--mode-selection th:first-child {
-    min-width: unset;
+    min-width: 48px;
+    text-align: center;
+    width: 48px;
 }
 
 .table tbody th {
     font-weight: 400;
 }
+
+.table thead button {
+    background-color: initial;
+    border: 1px solid transparent;
+    border-radius: 10px;
+    box-sizing: border-box;
+    color: inherit;
+    display: inline-block;
+    font-family: inherit;
+    font-size: var(--font-size-default);
+    margin: 0;
+    min-height: 40px;
+    min-width: auto;
+    padding: 3px;
+    text-align: center;
+    text-decoration: none;
+    transform: translateZ(0);
+    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);
+    line-height: var(--spacing-200);
+}
+
+.table-cell__thumbnail {
+    align-items: center;
+    background-color: var(--color-background-tertiary);
+    border-radius: 8px;
+    display: flex;
+    flex-wrap: nowrap;
+    height: 56px;
+    justify-content: center;
+    overflow: hidden;
+    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;
+}
+[dir="rtl"] .table th[scope="row"],
+[dir="rtl"] .table-cell {
+    text-align: right;
+}
+[dir="rtl"] .table-cell--numeric {
+    text-align: left;
+}

package/dist/tabs/tabs.css

@@ -32,7 +32,6 @@ li.fake-tabs__item {
 }
 div.tabs__item[role="tab"]:not(:last-child),
 li.fake-tabs__item:not(:last-child) {
-    -webkit-margin-end: var(--spacing-450);
     margin-inline-end: var(--spacing-450);
 }
 

package/dist/textbox/textbox.css

@@ -88,12 +88,10 @@ input.textbox__control {
 }
 
 input.textbox__control:first-child:not([readonly]) {
-    -webkit-padding-start: var(--spacing-200);
     padding-inline-start: var(--spacing-200);
 }
 
 input.textbox__control:last-child:not([readonly]) {
-    -webkit-padding-end: var(--spacing-200);
     padding-inline-end: var(--spacing-200);
 }
 
@@ -166,31 +164,27 @@ input.textbox__control {
 .textbox > svg {
     color: var(--textbox-icon-color, var(--color-foreground-secondary));
     display: inline-flex;
-    fill: var(--textbox-icon-color, var(--color-foreground-secondary));
     height: 1lh;
     pointer-events: none;
     width: 14px;
+    fill: var(--textbox-icon-color, var(--color-foreground-secondary));
 }
 
 .textbox > span:first-child,
 .textbox > svg:first-child {
-    -webkit-margin-start: var(--spacing-200);
     margin-inline-start: var(--spacing-200);
 }
 
 .textbox > span:last-child,
 .textbox > svg:last-child {
-    -webkit-margin-end: var(--spacing-200);
     margin-inline-end: var(--spacing-200);
 }
 
 .textbox .icon-btn:last-child {
-    -webkit-margin-start: calc(var(--spacing-100) * -1);
     margin-inline-start: calc(var(--spacing-100) * -1);
 }
 
 .textbox .icon-btn:first-child {
-    -webkit-margin-end: calc(var(--spacing-100) * -1);
     margin-inline-end: calc(var(--spacing-100) * -1);
 }
 

package/dist/toast-dialog/toast-dialog.css

@@ -80,13 +80,11 @@ button.toast-dialog__close {
         var(--color-foreground-on-information)
     );
     flex-shrink: 0;
-    -webkit-margin-start: auto;
     margin-inline-start: auto;
-    outline-offset: calc(var(--spacing-100) * -1);
     padding: 0;
 }
 button.toast-dialog__close:focus {
-    outline: 1px dashed white;
+    outline: 2px solid var(--color-foreground-on-information);
 }
 button.toast-dialog__close:focus,
 button.toast-dialog__close:hover {
@@ -128,12 +126,11 @@ button.toast-dialog__close > svg {
         var(--color-background-primary)
     );
     font-weight: 700;
-    -webkit-margin-end: var(--spacing-100);
     margin-inline-end: var(--spacing-100);
 }
 .toast-dialog__footer button.btn--primary:focus,
 .toast-dialog__footer button.btn--secondary:focus {
-    outline: 1px dashed var(--color-foreground-on-information);
+    outline: 2px solid var(--color-foreground-on-information);
 }
 .toast-dialog__footer button.btn--primary:not([disabled]):focus,
 .toast-dialog__footer button.btn--primary:not([disabled]):hover {

package/dist/tokens/evo-core.css

@@ -5,12 +5,14 @@
     --color-neutral-100: #fff;
     --color-neutral-100-rgb: 255, 255, 255;
     --color-neutral-200: #f7f7f7;
+    --color-neutral-200-rgb: 247, 247, 247;
     --color-neutral-300: #e5e5e5;
     --color-neutral-400: #c7c7c7;
     --color-neutral-500: #8f8f8f;
     --color-neutral-600: #707070;
     --color-neutral-700: #363636;
     --color-neutral-800: #191919;
+    --color-neutral-800-rgb: 25, 25, 25;
     --color-neutral-900: #000;
     --color-neutral-900-rgb: 0, 0, 0;
     --color-orange-100: #fffaf5;

package/dist/tokens/evo-dark.css

@@ -12,6 +12,8 @@
         --color-background-accent: var(--color-blue-400);
         --color-background-invalid: var(--color-red-200);
         --color-background-elevated: var(--color-neutral-800);
+        --color-background-strong: var(--color-neutral-200);
+        --color-background-strong-rgb: var(--color-neutral-200-rgb);
         --color-foreground-primary: var(--color-neutral-200);
         --color-foreground-secondary: var(--color-neutral-500);
         --color-foreground-disabled: var(--color-neutral-500);
@@ -28,6 +30,7 @@
         --color-foreground-on-attention: var(--color-neutral-800);
         --color-foreground-on-confirmation: var(--color-neutral-800);
         --color-foreground-on-information: var(--color-neutral-800);
+        --color-foreground-on-strong: var(--color-neutral-800);
         --color-stroke-default: var(--color-neutral-600);
         --color-stroke-accent: var(--color-blue-400);
         --color-stroke-attention: var(--color-red-400);
@@ -40,7 +43,9 @@
         --color-state-primary-hover: #17212c;
         --color-state-primary-active: #1e2a38;
         --color-state-secondary-hover: #3e3e3e;
+        --color-state-secondary-hover-rgb: 62, 62, 62;
         --color-state-secondary-active: #464646;
+        --color-state-secondary-active-rgb: 70, 70, 70;
         --color-state-inverse-hover: #f7f7f7;
         --color-state-inverse-active: #f8f8f8;
         --color-state-accent-hover: #6ba2ff;

package/dist/tokens/evo-light.css

@@ -11,6 +11,8 @@
     --color-background-accent: var(--color-blue-500);
     --color-background-invalid: var(--color-red-200);
     --color-background-elevated: var(--color-neutral-100);
+    --color-background-strong: var(--color-neutral-800);
+    --color-background-strong-rgb: var(--color-neutral-800-rgb);
     --color-foreground-primary: var(--color-neutral-800);
     --color-foreground-secondary: var(--color-neutral-600);
     --color-foreground-disabled: var(--color-neutral-400);
@@ -27,6 +29,7 @@
     --color-foreground-on-attention: var(--color-neutral-100);
     --color-foreground-on-confirmation: var(--color-neutral-100);
     --color-foreground-on-information: var(--color-neutral-100);
+    --color-foreground-on-strong: var(--color-neutral-100);
     --color-stroke-default: var(--color-neutral-500);
     --color-stroke-accent: var(--color-blue-500);
     --color-stroke-attention: var(--color-red-500);
@@ -40,7 +43,9 @@
     --color-state-primary-hover: #f5f5f5;
     --color-state-primary-active: #ebebeb;
     --color-state-secondary-hover: #ededed;
+    --color-state-secondary-hover-rgb: 237, 237, 237;
     --color-state-secondary-active: #e3e3e3;
+    --color-state-secondary-active-rgb: 227, 227, 227;
     --color-state-inverse-hover: #343434;
     --color-state-inverse-active: #323232;
     --color-state-accent-hover: #2854d9;

package/dist/tourtip/tourtip.css

@@ -31,9 +31,9 @@ span.tourtip {
 .tourtip__mask {
     background-color: var(
         --tourtip-background-color,
-        var(--color-background-elevated)
+        var(--color-background-inverse)
     );
-    color: var(--tourtip-foreground-color, var(--color-foreground-primary));
+    color: var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
     position: relative;
 }
 
@@ -48,7 +48,7 @@ span.tourtip__mask {
     word-break: break-word;
 }
 .tourtip__cell a {
-    color: var(--tourtip-foreground-color, var(--color-foreground-primary));
+    color: var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
 }
 .tourtip__cell a:focus {
     outline: 1px dashed currentColor;
@@ -78,11 +78,14 @@ button.tourtip__close {
     white-space: nowrap;
     width: 32px;
 }
+button.tourtip__close svg.icon {
+    fill: var(--tourtip-foreground-color, var(--color-foreground-on-inverse));
+}
 
 .tourtip__pointer {
     background-color: var(
         --tourtip-background-color,
-        var(--color-background-elevated)
+        var(--color-background-inverse)
     );
     height: 8px;
     position: absolute;
@@ -180,22 +183,29 @@ span.tourtip__heading {
     width: 100%;
 }
 
+.tourtip__footer > button.btn--primary {
+    background-color: var(
+        --tourtip-background-color,
+        var(--color-foreground-on-inverse)
+    );
+    color: var(--tourtip-foreground-color, var(--color-background-inverse));
+}
+
 .tourtip__footer > a:not(:last-child),
 .tourtip__footer > button:not(:last-child) {
-    margin-right: 8px;
+    margin-right: var(--spacing-200);
 }
 .tourtip__footer > .fake-link,
 .tourtip__footer > a {
-    color: var(--color-foreground-primary);
+    color: var(--color-foreground-on-inverse);
     text-decoration: none;
 }
 .tourtip__footer > .fake-link:hover:not(:disabled),
 .tourtip__footer > a:hover:not(:disabled) {
-    color: var(--color-foreground-primary);
+    color: var(--color-foreground-on-inverse);
     text-decoration: underline;
 }
 .tourtip__index {
-    color: var(--tourtip-index-color, var(--color-foreground-secondary));
     flex: 1;
 }
 

package/dist/video/video.css

@@ -32,7 +32,6 @@
 }
 
 .video-player__report-button > svg {
-    -webkit-margin-end: var(--spacing-50);
     margin-inline-end: var(--spacing-50);
 }
 

package/file-input.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./file-input.js"] }

package/file-input.css

@@ -0,0 +1 @@
+@import "./dist/file-input/file-input.css";

package/file-input.js

@@ -0,0 +1 @@
+require('./dist/file-input/file-input.css');

package/file-input.mjs

@@ -0,0 +1 @@
+import './dist/file-input/file-input.css';

package/file-preview-card-group.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./file-preview-card-group.js"] }

package/file-preview-card-group.css

@@ -0,0 +1 @@
+@import "./dist/file-preview-card-group/file-preview-card-group.css";

package/file-preview-card-group.js

@@ -0,0 +1 @@
+require('./dist/file-preview-card-group/file-preview-card-group.css');

package/file-preview-card-group.mjs

@@ -0,0 +1 @@
+import './dist/file-preview-card-group/file-preview-card-group.css';

package/file-preview-card.browser.json

@@ -0,0 +1 @@
+{ "dependencies": ["require: ./file-preview-card.js"] }

package/file-preview-card.css

@@ -0,0 +1 @@
+@import "./dist/file-preview-card/file-preview-card.css";

package/file-preview-card.js

@@ -0,0 +1 @@
+require('./dist/file-preview-card/file-preview-card.css');

package/file-preview-card.mjs

@@ -0,0 +1 @@
+import './dist/file-preview-card/file-preview-card.css';

package/index.browser.json

@@ -21,6 +21,9 @@
     "require: ./education-notice.js",
     "require: ./eek.js",
     "require: ./field.js",
+    "require: ./file-input.js",
+    "require: ./file-preview-card.js",
+    "require: ./file-preview-card-group.js",
     "require: ./filter-button.js",
     "require: ./filter-menu.js",
     "require: ./filter-menu-button.js",

package/index.css

@@ -19,6 +19,9 @@
 @import "./education-notice.css";
 @import "./eek.css";
 @import "./field.css";
+@import "./file-input.css";
+@import "./file-preview-card.css";
+@import "./file-preview-card-group.css";
 @import "./filter-button.css";
 @import "./filter-menu.css";
 @import "./filter-menu-button.css";

package/index.js

@@ -19,6 +19,9 @@ require('./drawer-dialog.js');
 require('./education-notice.js');
 require('./eek.js');
 require('./field.js');
+require('./file-input.js');
+require('./file-preview-card.js');
+require('./file-preview-card-group.js');
 require('./filter-button.js');
 require('./filter-menu.js');
 require('./filter-menu-button.js');

package/index.mjs

@@ -19,6 +19,9 @@ import './drawer-dialog.css';
 import './education-notice.css';
 import './eek.css';
 import './field.css';
+import './file-input.css';
+import './file-preview-card.css';
+import './file-preview-card-group.css';
 import './filter-button.css';
 import './filter-menu.css';
 import './filter-menu-button.css';