@ebay/skin 19.12.1 → 19.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/dist/alert-dialog/alert-dialog.css +2 -3
  2. package/dist/bundles/skin-default.css +177 -97
  3. package/dist/bundles/skin-full.css +184 -97
  4. package/dist/bundles/skin-headless.css +170 -97
  5. package/dist/button/button.css +26 -44
  6. package/dist/combobox/combobox.css +5 -20
  7. package/dist/confirm-dialog/confirm-dialog.css +2 -3
  8. package/dist/drawer-dialog/drawer-dialog.css +2 -3
  9. package/dist/filter-button/filter-button.css +2 -12
  10. package/dist/filter-chip/filter-chip.css +69 -1
  11. package/dist/filter-menu-button/filter-menu-button.css +10 -20
  12. package/dist/fullscreen-dialog/fullscreen-dialog.css +0 -1
  13. package/dist/icon-button/icon-button.css +22 -68
  14. package/dist/lightbox-dialog/lightbox-dialog.css +2 -3
  15. package/dist/listbox/listbox.css +4 -13
  16. package/dist/listbox-button/listbox-button.css +5 -20
  17. package/dist/menu-button/menu-button.css +2 -8
  18. package/dist/panel-dialog/panel-dialog.css +2 -3
  19. package/dist/progress-stepper/progress-stepper.css +1 -0
  20. package/dist/section-notice/section-notice.css +3 -10
  21. package/dist/selection-chip/selection-chip.css +53 -0
  22. package/dist/svg/icon/icon-afterpay-logo-24-colored.svg +13 -0
  23. package/dist/svg/icon/icon-ai-camera-16.svg +5 -0
  24. package/dist/svg/icon/icon-ai-camera-20.svg +5 -0
  25. package/dist/svg/icon/icon-ai-camera-24.svg +5 -0
  26. package/dist/svg/icon/icon-ai-search-16.svg +5 -0
  27. package/dist/svg/icon/icon-ai-search-20.svg +5 -0
  28. package/dist/svg/icon/icon-ai-search-24.svg +5 -0
  29. package/dist/svg/icon/icon-ai-shirt-16.svg +5 -0
  30. package/dist/svg/icon/icon-ai-shirt-20.svg +5 -0
  31. package/dist/svg/icon/icon-ai-shirt-24.svg +5 -0
  32. package/dist/svg/icon/icon-attention-triangle-16.svg +5 -0
  33. package/dist/svg/icon/icon-attention-triangle-24.svg +5 -0
  34. package/dist/svg/icon/icon-attention-triangle-filled-16.svg +5 -0
  35. package/dist/svg/icon/icon-attention-triangle-filled-24.svg +5 -0
  36. package/dist/svg/icon/icon-bank-group-logo-24-colored.svg +67 -0
  37. package/dist/svg/icon/icon-clock-12.svg +9 -0
  38. package/dist/svg/icon/icon-closed-caption-16.svg +2 -7
  39. package/dist/svg/icon/icon-closed-caption-24.svg +5 -0
  40. package/dist/svg/icon/icon-closed-caption-filled-16.svg +2 -4
  41. package/dist/svg/icon/icon-closed-caption-filled-24.svg +5 -0
  42. package/dist/svg/icon/icon-credit-card-20.svg +5 -0
  43. package/dist/svg/icon/icon-credit-card-24.svg +1 -3
  44. package/dist/svg/icon/icon-credit-card-cvv-back-20.svg +5 -0
  45. package/dist/svg/icon/icon-credit-card-cvv-back-24.svg +5 -0
  46. package/dist/svg/icon/icon-credit-card-cvv-front-20.svg +5 -0
  47. package/dist/svg/icon/icon-credit-card-cvv-front-24.svg +5 -0
  48. package/dist/svg/icon/icon-density-row-compact-16.svg +5 -0
  49. package/dist/svg/icon/icon-density-row-compact-24.svg +5 -0
  50. package/dist/svg/icon/icon-density-row-relaxed-16.svg +5 -0
  51. package/dist/svg/icon/icon-density-row-relaxed-24.svg +5 -0
  52. package/dist/svg/icon/icon-fingerprint-16.svg +5 -0
  53. package/dist/svg/icon/icon-information-20.svg +5 -0
  54. package/dist/svg/icon/icon-information-filled-20.svg +5 -0
  55. package/dist/svg/icon/icon-note-16.svg +5 -0
  56. package/dist/svg/icon/icon-note-24.svg +5 -0
  57. package/dist/svg/icon/icon-notification-filled-16.svg +5 -0
  58. package/dist/svg/icon/icon-notification-filled-20.svg +5 -0
  59. package/dist/svg/icon/icon-pay-by-bank-12-colored.svg +7 -0
  60. package/dist/svg/icon/icon-pay-by-bank-18-colored.svg +7 -0
  61. package/dist/svg/icon/icon-pay-by-bank-24-colored.svg +7 -0
  62. package/dist/svg/icon/icon-pay-by-bank-32-colored.svg +7 -0
  63. package/dist/svg/icon/icon-payout-16.svg +5 -0
  64. package/dist/svg/icon/icon-payout-24.svg +5 -0
  65. package/dist/svg/icon/icon-secure-purchase-16.svg +5 -0
  66. package/dist/svg/icon/icon-secure-purchase-24.svg +5 -0
  67. package/dist/svg/icon/icon-shopping-event-16.svg +5 -0
  68. package/dist/svg/icon/icon-shopping-event-24.svg +5 -0
  69. package/dist/svg/icon/icon-wallet-16.svg +5 -0
  70. package/dist/svg/icon/icon-zip-pay-12-colored.svg +12 -0
  71. package/dist/svg/icon/icon-zip-pay-18-colored.svg +12 -0
  72. package/dist/svg/icon/icon-zip-pay-24-colored.svg +12 -0
  73. package/dist/svg/icon/icon-zip-pay-32-colored.svg +15 -0
  74. package/dist/svg/icons.svg +364 -12
  75. package/dist/toast-dialog/toast-dialog.css +7 -7
  76. package/dist/tokens/evo-dark.css +7 -0
  77. package/dist/tokens/evo-light.css +8 -0
  78. package/package.json +8 -7
package/dist/tokens/evo-dark.css CHANGED
@@ -90,6 +90,7 @@
90
90
  --color-scrim-image: rgba(255, 255, 255, 0.12);
91
91
  --color-scrim-background: rgba(0, 0, 0, 0.64);
92
92
  --state-layer-neutral: rgb(var(--color-neutral-100-rgb), 0);
93
+ --state-layer-neutral-on-strong: rgb(var(--color-neutral-900-rgb), 0);
93
94
  --state-layer-focus: rgb(
94
95
  var(--color-neutral-100-rgb),
95
96
  var(--opacity-50)
@@ -102,6 +103,12 @@
102
103
  var(--color-neutral-100-rgb),
103
104
  var(--opacity-100)
104
105
  );
106
+ --state-layer-focus-on-strong: rgb(var(--color-neutral-900-rgb), var(--opacity-100));
107
+ --state-layer-hover-on-strong: rgb(var(--color-neutral-900-rgb), var(--opacity-100));
108
+ --state-layer-pressed-on-strong: rgb(
109
+ var(--color-neutral-900-rgb),
110
+ var(--opacity-150)
111
+ );
105
112
  --state-layer-drag: rgb(
106
113
  var(--color-neutral-100-rgb),
107
114
  var(--opacity-150)
package/dist/tokens/evo-light.css CHANGED
@@ -104,12 +104,20 @@
104
104
  --color-marketing-magenta-foreground-4: var(--color-neutral-100);
105
105
  --color-marketing-magenta-background-4: var(--color-pink-400);
106
106
  --state-layer-neutral: rgb(var(--color-neutral-900-rgb), 0);
107
+ --state-layer-neutral-on-strong: rgb(var(--color-neutral-100-rgb), 0);
107
108
  --state-layer-focus: rgb(var(--color-neutral-900-rgb), var(--opacity-50));
108
109
  --state-layer-hover: rgb(var(--color-neutral-900-rgb), var(--opacity-50));
109
110
  --state-layer-pressed: rgb(
110
111
  var(--color-neutral-900-rgb),
111
112
  var(--opacity-100)
112
113
  );
114
+ --state-layer-focus-on-strong: rgb(var(--color-neutral-100-rgb), var(--opacity-150));
115
+ --state-layer-hover-on-strong: rgb(var(--color-neutral-100-rgb), var(--opacity-150));
116
+ --state-layer-pressed-on-strong: rgb(
117
+ var(--color-neutral-100-rgb),
118
+ var(--opacity-200)
119
+ );
120
+
113
121
  --state-layer-drag: rgb(var(--color-neutral-900-rgb), var(--opacity-150));
114
122
  --color-ai-gradient-full-spectrum: linear-gradient(
115
123
  223deg,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ebay/skin",
3
- "version": "19.12.1",
3
+ "version": "19.14.0",
4
4
  "description": "Skin - CSS modules that represent the brand eBay",
5
5
  "keywords": [
6
6
  "eBay",
@@ -35,14 +35,15 @@
35
35
  ],
36
36
  "scripts": {
37
37
  "prebuild": "npm run clean",
38
- "build": "npm run build:css && npm run lint:js && npm run copy && node scripts gen-build",
39
- "build:css": "npm run lint:sass && rimraf dist && npm run bundle && npm run postcss && node scripts/add-y-comments.js && prettier dist --write && npm run lint:css",
38
+ "build": "npm run build:css && npm run lint:js && npm run build:icons && npm run copy && tsx scripts gen-build",
39
+ "build:css": "npm run lint:sass && rimraf dist && npm run bundle && npm run postcss && tsx scripts/add-y-comments && prettier dist --write && npm run lint:css",
40
+ "build:icons": "tsx scripts genSVG && prettier src/components/data/icons.json --write",
40
41
  "build:snapshots": "npm run copy:assetsToStorybook && storybook build -o ./.storybook-percy",
41
42
  "build:storybook": "npm run copy:assetsToStorybook && storybook build -o ./_site/public/storybook",
42
43
  "bundle": "sass src/sass:dist --no-source-map",
43
44
  "clean": "rimraf _cdn _site .cache .tmp .jekyll npm-debug.log.* .DS_Store",
44
45
  "copy": "npm run copy:sassToDist && npm run copy:svgToDist && npm run copy:svgToDocs && npm run copy:tokensToDist && npm run copy:assetsToStorybook",
45
- "copy:assetsToStorybook": "node scripts storybook-copy",
46
+ "copy:assetsToStorybook": "tsx scripts storybook-copy",
46
47
  "copy:sassToDist": "mkdirp dist/variables && ncp src/sass/variables dist/variables && mkdirp dist/mixins && ncp src/sass/mixins/public dist/mixins && ncp src/sass/gh dist/gh",
47
48
  "copy:svgToDist": "mkdirp dist/svg && ncp src/svg dist/svg",
48
49
  "copy:svgToDocs": "ncp src/svg src/routes/static && ncp src/svg/icons.svg src/components/master-icons.marko",
@@ -56,9 +57,9 @@
56
57
  "lint:js": "eslint 'src/routes/main.js' > lint.log && eslint 'src/sass/**/stories/*.js' >> lint.log ",
57
58
  "lint:sass": "stylelint src/routes/**/*.scss src/sass --config .stylelintrc",
58
59
  "postcss": "postcss dist/**/*.css -r ",
59
- "prepublishOnly": "node scripts gen",
60
+ "prepublishOnly": "tsx scripts gen",
60
61
  "preview": "marko-run preview",
61
- "postpublish": "node scripts clean",
62
+ "postpublish": "tsx scripts clean",
62
63
  "release": "npm run build",
63
64
  "snapshots": "npm run build:snapshots && npx gulp runSnapshots --stories $STORIES",
64
65
  "snapshots:all": "npm run build:snapshots && percy storybook ./.storybook-percy --include '.*'",
@@ -69,7 +70,7 @@
69
70
  "start": "marko-run",
70
71
  "storybook": "npm run copy:assetsToStorybook && storybook dev -c .storybook --no-open",
71
72
  "test": "npm run build",
72
- "verify": "node scripts verify",
73
+ "verify": "tsx scripts verify",
73
74
  "version": "npm run build"
74
75
  },
75
76
  "commitlint": {