@ebay/skin 17.5.0 → 18.0.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 (469) hide show
  1. package/.github/workflows/pages-html-proofer.yml +1 -1
  2. package/.prettierignore +0 -1
  3. package/.storybook/main.js +4 -11
  4. package/.storybook/preview.js +1 -1
  5. package/.stylelintrc +16 -24
  6. package/CHANGELOG.md +40 -0
  7. package/CONTRIBUTING.md +1 -1
  8. package/bundles.browser.json +1 -0
  9. package/bundles.css +1 -0
  10. package/bundles.js +1 -0
  11. package/bundles.mjs +1 -0
  12. package/chart-legend.browser.json +1 -0
  13. package/chart-legend.css +1 -0
  14. package/chart-legend.js +1 -0
  15. package/chart-legend.mjs +1 -0
  16. package/dist/alert-dialog/alert-dialog.css +84 -72
  17. package/dist/alert-dialog/alert-dialog.css.map +1 -0
  18. package/dist/avatar/avatar.css +81 -62
  19. package/dist/avatar/avatar.css.map +1 -0
  20. package/dist/badge/badge.css +16 -11
  21. package/dist/badge/badge.css.map +1 -0
  22. package/dist/breadcrumbs/breadcrumbs.css +87 -59
  23. package/dist/breadcrumbs/breadcrumbs.css.map +1 -0
  24. package/dist/bundles/skin-default.css +10073 -0
  25. package/dist/bundles/skin-default.css.map +1 -0
  26. package/dist/bundles/skin-full.css +10257 -0
  27. package/dist/bundles/skin-full.css.map +1 -0
  28. package/dist/bundles/skin-headless.css +9685 -0
  29. package/dist/bundles/skin-headless.css.map +1 -0
  30. package/dist/button/button.css +590 -415
  31. package/dist/button/button.css.map +1 -0
  32. package/dist/calendar/calendar.css +148 -102
  33. package/dist/calendar/calendar.css.map +1 -0
  34. package/dist/carousel/carousel.css +233 -212
  35. package/dist/carousel/carousel.css.map +1 -0
  36. package/dist/chart-legend/chart-legend.css +77 -0
  37. package/dist/chart-legend/chart-legend.css.map +1 -0
  38. package/dist/checkbox/checkbox.css +77 -54
  39. package/dist/checkbox/checkbox.css.map +1 -0
  40. package/dist/chip/chip.css +41 -34
  41. package/dist/chip/chip.css.map +1 -0
  42. package/dist/chips-combobox/chips-combobox.css +77 -62
  43. package/dist/chips-combobox/chips-combobox.css.map +1 -0
  44. package/dist/combobox/combobox.css +246 -163
  45. package/dist/combobox/combobox.css.map +1 -0
  46. package/dist/confirm-dialog/confirm-dialog.css +86 -73
  47. package/dist/confirm-dialog/confirm-dialog.css.map +1 -0
  48. package/dist/cta-button/cta-button.css +96 -70
  49. package/dist/cta-button/cta-button.css.map +1 -0
  50. package/dist/date-textbox/date-textbox.css +24 -15
  51. package/dist/date-textbox/date-textbox.css.map +1 -0
  52. package/dist/details/details.css +34 -27
  53. package/dist/details/details.css.map +1 -0
  54. package/dist/donut-chart/donut-chart.css +91 -0
  55. package/dist/donut-chart/donut-chart.css.map +1 -0
  56. package/dist/drawer-dialog/drawer-dialog.css +133 -118
  57. package/dist/drawer-dialog/drawer-dialog.css.map +1 -0
  58. package/dist/education-notice/education-notice.css +62 -34
  59. package/dist/education-notice/education-notice.css.map +1 -0
  60. package/dist/eek/eek.css +97 -74
  61. package/dist/eek/eek.css.map +1 -0
  62. package/dist/field/field.css +87 -53
  63. package/dist/field/field.css.map +1 -0
  64. package/dist/filter-button/filter-button.css +115 -75
  65. package/dist/filter-button/filter-button.css.map +1 -0
  66. package/dist/filter-menu/filter-menu.css +176 -121
  67. package/dist/filter-menu/filter-menu.css.map +1 -0
  68. package/dist/filter-menu-button/filter-menu-button.css +307 -181
  69. package/dist/filter-menu-button/filter-menu-button.css.map +1 -0
  70. package/dist/flag/flag.css +528 -272
  71. package/dist/flag/flag.css.map +1 -0
  72. package/dist/floating-label/floating-label.css +100 -51
  73. package/dist/floating-label/floating-label.css.map +1 -0
  74. package/dist/fullscreen-dialog/fullscreen-dialog.css +112 -99
  75. package/dist/fullscreen-dialog/fullscreen-dialog.css.map +1 -0
  76. package/dist/global/global.css +32 -13
  77. package/dist/global/global.css.map +1 -0
  78. package/dist/icon/icon.css +56 -2943
  79. package/dist/icon/icon.css.map +1 -0
  80. package/dist/icon-button/icon-button.css +307 -212
  81. package/dist/icon-button/icon-button.css.map +1 -0
  82. package/dist/image-placeholder/image-placeholder.css +6 -4
  83. package/dist/image-placeholder/image-placeholder.css.map +1 -0
  84. package/dist/infotip/infotip.css +121 -92
  85. package/dist/infotip/infotip.css.map +1 -0
  86. package/dist/inline-notice/inline-notice.css +16 -9
  87. package/dist/inline-notice/inline-notice.css.map +1 -0
  88. package/dist/lightbox-dialog/lightbox-dialog.css +241 -185
  89. package/dist/lightbox-dialog/lightbox-dialog.css.map +1 -0
  90. package/dist/link/link.css +37 -19
  91. package/dist/link/link.css.map +1 -0
  92. package/dist/listbox/listbox.css +86 -58
  93. package/dist/listbox/listbox.css.map +1 -0
  94. package/dist/listbox-button/listbox-button.css +240 -134
  95. package/dist/listbox-button/listbox-button.css.map +1 -0
  96. package/dist/marketsans/marketsans.css +34 -12
  97. package/dist/marketsans/marketsans.css.map +1 -0
  98. package/dist/menu/menu.css +136 -99
  99. package/dist/menu/menu.css.map +1 -0
  100. package/dist/menu-button/menu-button.css +236 -157
  101. package/dist/menu-button/menu-button.css.map +1 -0
  102. package/dist/mixins/_typography-mixins.scss +136 -0
  103. package/dist/mixins/_utility-mixins.scss +62 -0
  104. package/dist/page-grid/page-grid.css +57 -46
  105. package/dist/page-grid/page-grid.css.map +1 -0
  106. package/dist/page-notice/page-notice.css +142 -85
  107. package/dist/page-notice/page-notice.css.map +1 -0
  108. package/dist/pagination/pagination.css +109 -80
  109. package/dist/pagination/pagination.css.map +1 -0
  110. package/dist/panel-dialog/panel-dialog.css +115 -98
  111. package/dist/panel-dialog/panel-dialog.css.map +1 -0
  112. package/dist/phone-input/phone-input.css +100 -88
  113. package/dist/phone-input/phone-input.css.map +1 -0
  114. package/dist/progress-bar/progress-bar.css +32 -15
  115. package/dist/progress-bar/progress-bar.css.map +1 -0
  116. package/dist/progress-bar-expressive/progress-bar-expressive.css +302 -203
  117. package/dist/progress-bar-expressive/progress-bar-expressive.css.map +1 -0
  118. package/dist/progress-spinner/progress-spinner.css +24 -20
  119. package/dist/progress-spinner/progress-spinner.css.map +1 -0
  120. package/dist/progress-stepper/progress-stepper.css +229 -117
  121. package/dist/progress-stepper/progress-stepper.css.map +1 -0
  122. package/dist/radio/radio.css +71 -52
  123. package/dist/radio/radio.css.map +1 -0
  124. package/dist/section-notice/section-notice.css +102 -72
  125. package/dist/section-notice/section-notice.css.map +1 -0
  126. package/dist/section-title/section-title.css +66 -52
  127. package/dist/section-title/section-title.css.map +1 -0
  128. package/dist/segmented-buttons/segmented-buttons.css +49 -38
  129. package/dist/segmented-buttons/segmented-buttons.css.map +1 -0
  130. package/dist/select/select.css +98 -62
  131. package/dist/select/select.css.map +1 -0
  132. package/dist/signal/signal.css +25 -16
  133. package/dist/signal/signal.css.map +1 -0
  134. package/dist/skeleton/skeleton.css +131 -108
  135. package/dist/skeleton/skeleton.css.map +1 -0
  136. package/dist/snackbar-dialog/snackbar-dialog.css +82 -52
  137. package/dist/snackbar-dialog/snackbar-dialog.css.map +1 -0
  138. package/dist/split-button/split-button.css +3 -1
  139. package/dist/split-button/split-button.css.map +1 -0
  140. package/dist/star-rating/star-rating.css +40 -19
  141. package/dist/star-rating/star-rating.css.map +1 -0
  142. package/dist/star-rating-select/star-rating-select.css +67 -39
  143. package/dist/star-rating-select/star-rating-select.css.map +1 -0
  144. package/dist/svg/icons.svg +21 -21
  145. package/dist/switch/switch.css +119 -78
  146. package/dist/switch/switch.css.map +1 -0
  147. package/dist/tabs/tabs.css +70 -51
  148. package/dist/tabs/tabs.css.map +1 -0
  149. package/dist/textbox/textbox.css +167 -112
  150. package/dist/textbox/textbox.css.map +1 -0
  151. package/dist/toast-dialog/toast-dialog.css +140 -90
  152. package/dist/toast-dialog/toast-dialog.css.map +1 -0
  153. package/dist/toggle-button/toggle-button.css +154 -114
  154. package/dist/toggle-button/toggle-button.css.map +1 -0
  155. package/dist/toggle-button-group/toggle-button-group.css +610 -60
  156. package/dist/toggle-button-group/toggle-button-group.css.map +1 -0
  157. package/dist/tokens/evo-core.css +139 -67
  158. package/dist/tokens/evo-dark.css +57 -62
  159. package/dist/tokens/evo-light.css +76 -76
  160. package/dist/tooltip/tooltip.css +117 -84
  161. package/dist/tooltip/tooltip.css.map +1 -0
  162. package/dist/tourtip/tourtip.css +141 -107
  163. package/dist/tourtip/tourtip.css.map +1 -0
  164. package/dist/typography/typography.css +86 -59
  165. package/dist/typography/typography.css.map +1 -0
  166. package/dist/utility/utility.css +75 -72
  167. package/dist/utility/utility.css.map +1 -0
  168. package/dist/variables/_variables.scss +64 -0
  169. package/dist/video/video.css +46 -34
  170. package/dist/video/video.css.map +1 -0
  171. package/donut-chart.browser.json +1 -0
  172. package/donut-chart.css +1 -0
  173. package/donut-chart.js +1 -0
  174. package/donut-chart.mjs +1 -0
  175. package/gh.browser.json +4 -4
  176. package/index.browser.json +3 -0
  177. package/index.css +3 -0
  178. package/index.js +3 -0
  179. package/index.mjs +3 -0
  180. package/lint.log +3 -3
  181. package/package.json +74 -55
  182. package/postcss.config.js +17 -0
  183. package/scripts/README.md +1 -1
  184. package/scripts/generate-bundle.js +13 -12
  185. package/scripts/generate-images.js +34 -23
  186. package/src/{less/alert-dialog/alert-dialog.less → sass/alert-dialog/alert-dialog.scss} +14 -12
  187. package/src/sass/avatar/avatar.scss +134 -0
  188. package/src/sass/badge/badge.scss +21 -0
  189. package/src/{less/breadcrumbs/breadcrumbs.less → sass/breadcrumbs/breadcrumbs.scss} +25 -14
  190. package/src/{less → sass}/breadcrumbs/stories/button-cascade.stories.js +12 -12
  191. package/src/{less → sass}/breadcrumbs/stories/button-overflow.stories.js +15 -15
  192. package/src/{less → sass}/breadcrumbs/stories/buttons.stories.js +5 -5
  193. package/src/{less → sass}/breadcrumbs/stories/link-cascade.stories.js +12 -12
  194. package/src/{less → sass}/breadcrumbs/stories/link-overflow.stories.js +15 -15
  195. package/src/{less → sass}/breadcrumbs/stories/links.stories.js +5 -5
  196. package/src/sass/bundles/skin-default.scss +9 -0
  197. package/src/sass/bundles/skin-full.scss +10 -0
  198. package/src/sass/bundles/skin-headless.scss +72 -0
  199. package/src/{less/button/button.less → sass/button/button.scss} +185 -71
  200. package/src/{less → sass}/button/stories/button/base.stories.js +5 -5
  201. package/src/{less → sass}/button/stories/button/borderless.stories.js +4 -4
  202. package/src/{less → sass}/button/stories/button/cascade.stories.js +3 -3
  203. package/src/{less → sass}/button/stories/button/dimensions.stories.js +2 -2
  204. package/src/{less → sass}/button/stories/button/primary.stories.js +4 -4
  205. package/src/{less → sass}/button/stories/button/secondary.stories.js +4 -4
  206. package/src/{less → sass}/button/stories/button/tertiary.stories.js +4 -4
  207. package/src/{less → sass}/button/stories/button/text-spacing.stories.js +1 -1
  208. package/src/{less → sass}/button/stories/destructive-button/primary.stories.js +3 -3
  209. package/src/{less → sass}/button/stories/destructive-button/secondary.stories.js +3 -3
  210. package/src/{less → sass}/button/stories/destructive-button/tertiary.stories.js +3 -3
  211. package/src/{less → sass}/button/stories/fake-button/base.stories.js +2 -2
  212. package/src/{less → sass}/button/stories/fake-button/cascade.stories.js +3 -3
  213. package/src/{less → sass}/button/stories/fake-button/dimensions.stories.js +1 -1
  214. package/src/{less → sass}/button/stories/fake-button/primary.stories.js +4 -4
  215. package/src/{less → sass}/button/stories/fake-button/secondary.stories.js +4 -4
  216. package/src/{less → sass}/button/stories/fake-button/text-spacing.stories.js +1 -1
  217. package/src/{less/calendar/calendar.less → sass/calendar/calendar.scss} +43 -18
  218. package/src/{less → sass}/calendar/stories/calendar.stories.js +6 -6
  219. package/src/{less/carousel/carousel.less → sass/carousel/carousel.scss} +68 -58
  220. package/src/{less → sass}/carousel/stories/carousel.stories.js +25 -25
  221. package/src/sass/chart-legend/chart-legend.scss +74 -0
  222. package/src/sass/chart-legend/stories/chart-legend.stories.js +65 -0
  223. package/src/{less/checkbox/checkbox.less → sass/checkbox/checkbox.scss} +25 -24
  224. package/src/{less/chip/chip.less → sass/chip/chip.scss} +1 -1
  225. package/src/{less → sass}/chip/stories/interactive-chip.stories.js +17 -17
  226. package/src/{less/chips-combobox/chips-combobox.less → sass/chips-combobox/chips-combobox.scss} +7 -7
  227. package/src/{less → sass}/chips-combobox/stories/chips-combobox.stories.js +38 -38
  228. package/src/{less → sass}/chips-combobox/stories/rtl-chips-combobox.stories.js +34 -34
  229. package/src/{less/combobox/combobox.less → sass/combobox/combobox.scss} +78 -37
  230. package/src/{less → sass}/combobox/stories/combobox.stories.js +11 -11
  231. package/src/{less/confirm-dialog/confirm-dialog.less → sass/confirm-dialog/confirm-dialog.scss} +14 -12
  232. package/src/sass/cta-button/cta-button.scss +105 -0
  233. package/src/{less → sass}/cta-button/stories/cascade.stories.js +3 -3
  234. package/src/{less → sass}/cta-button/stories/cta-button.stories.js +2 -2
  235. package/src/{less → sass}/cta-button/stories/dimensions.stories.js +2 -2
  236. package/src/{less/date-textbox/date-textbox.less → sass/date-textbox/date-textbox.scss} +10 -6
  237. package/src/{less → sass}/date-textbox/stories/date-textbox.stories.js +23 -7
  238. package/src/{less/details/details.less → sass/details/details.scss} +9 -5
  239. package/src/{less → sass}/details/stories/cascade.stories.js +3 -3
  240. package/src/{less → sass}/details/stories/details.stories.js +5 -5
  241. package/src/sass/donut-chart/donut-chart.scss +98 -0
  242. package/src/sass/donut-chart/stories/donut-chart.stories.js +39 -0
  243. package/src/{less/drawer-dialog/drawer-dialog.less → sass/drawer-dialog/drawer-dialog.scss} +24 -21
  244. package/src/{less → sass}/drawer-dialog/stories/drawer-dialog.stories.js +8 -8
  245. package/src/{less/education-notice/education-notice.less → sass/education-notice/education-notice.scss} +26 -8
  246. package/src/{less → sass}/education-notice/stories/base.stories.js +13 -13
  247. package/src/{less/eek/eek.less → sass/eek/eek.scss} +43 -42
  248. package/src/{less/field/field.less → sass/field/field.scss} +23 -13
  249. package/src/{less → sass}/field/stories/stacked.stories.js +8 -8
  250. package/src/{less → sass}/field/stories/unstacked.stories.js +4 -4
  251. package/src/sass/filter-button/filter-button.scss +112 -0
  252. package/src/{less/filter-menu/filter-menu.less → sass/filter-menu/filter-menu.scss} +30 -19
  253. package/src/{less → sass}/filter-menu/stories/filter-menu.stories.js +24 -24
  254. package/src/{less/filter-menu-button/filter-menu-button.less → sass/filter-menu-button/filter-menu-button.scss} +112 -45
  255. package/src/{less → sass}/filter-menu-button/stories/filter-menu-button.stories.js +124 -124
  256. package/src/{less/floating-label/floating-label.less → sass/floating-label/floating-label.scss} +31 -15
  257. package/src/{less → sass}/floating-label/stories/floating-label.stories.js +15 -15
  258. package/src/{less/fullscreen-dialog/fullscreen-dialog.less → sass/fullscreen-dialog/fullscreen-dialog.scss} +15 -11
  259. package/src/{less → sass}/fullscreen-dialog/stories/fullscreen-dialog.stories.js +5 -5
  260. package/src/sass/gh/_gh-mixins.scss +197 -0
  261. package/src/sass/global/global.scss +50 -0
  262. package/src/{less → sass}/global/stories/global.stories.js +12 -12
  263. package/src/sass/icon/icon.scss +92 -0
  264. package/src/{less → sass}/icon/stories/icon.stories.js +5 -5
  265. package/src/{less/icon-button/icon-button.less → sass/icon-button/icon-button.scss} +88 -35
  266. package/src/sass/icon-button/stories/alignment.stories.js +28 -0
  267. package/src/{less → sass}/icon-button/stories/buttons.stories.js +36 -36
  268. package/src/{less → sass}/icon-button/stories/links.stories.js +36 -36
  269. package/src/sass/image-placeholder/image-placeholder.scss +10 -0
  270. package/src/sass/infotip/infotip.scss +136 -0
  271. package/src/{less → sass}/infotip/stories/infotip.stories.js +12 -12
  272. package/src/{less/inline-notice/inline-notice.less → sass/inline-notice/inline-notice.scss} +3 -3
  273. package/src/{less → sass}/inline-notice/stories/inline.stories.js +11 -11
  274. package/src/{less/lightbox-dialog/lightbox-dialog.less → sass/lightbox-dialog/lightbox-dialog.scss} +62 -20
  275. package/src/{less → sass}/lightbox-dialog/stories/lightbox-dialog.stories.js +40 -33
  276. package/src/sass/link/link.scss +61 -0
  277. package/src/{less/listbox/listbox.less → sass/listbox/listbox.scss} +20 -14
  278. package/src/{less → sass}/listbox/stories/cascade.stories.js +9 -9
  279. package/src/{less → sass}/listbox/stories/listbox.stories.js +18 -18
  280. package/src/sass/listbox-button/listbox-button.scss +233 -0
  281. package/src/{less → sass}/listbox-button/stories/base.stories.js +48 -48
  282. package/src/{less → sass}/listbox-button/stories/cascade.stories.js +15 -15
  283. package/src/{less → sass}/listbox-button/stories/dimensions.stories.js +5 -5
  284. package/src/{less → sass}/listbox-button/stories/error/error.base.stories.js +38 -38
  285. package/src/{less → sass}/listbox-button/stories/error/error.cascade.stories.js +15 -15
  286. package/src/{less → sass}/listbox-button/stories/error/error.dimensions.stories.js +5 -5
  287. package/src/{less → sass}/listbox-button/stories/error/error.form.stories.js +10 -10
  288. package/src/{less → sass}/listbox-button/stories/form.stories.js +15 -15
  289. package/src/{less → sass}/listbox-button/stories/subtitle.stories.js +38 -38
  290. package/src/sass/marketsans/marketsans.scss +46 -0
  291. package/src/{less/menu/menu.less → sass/menu/menu.scss} +22 -12
  292. package/src/{less → sass}/menu/stories/fake-menu.stories.js +4 -4
  293. package/src/{less → sass}/menu/stories/multiSelect.stories.js +9 -9
  294. package/src/{less/menu-button/menu-button.less → sass/menu-button/menu-button.scss} +60 -30
  295. package/src/{less → sass}/menu-button/stories/base.stories.js +30 -30
  296. package/src/{less → sass}/menu-button/stories/cascade.stories.js +6 -6
  297. package/src/{less → sass}/menu-button/stories/dimensions.stories.js +1 -1
  298. package/src/{less → sass}/menu-button/stories/fake-menu-button.stories.js +6 -6
  299. package/src/sass/mixins/private/_bubble-mixins.scss +168 -0
  300. package/src/sass/mixins/private/_button-mixins.scss +95 -0
  301. package/src/{less/mixins/private/dialog-mixins.less → sass/mixins/private/_dialog-mixins.scss} +25 -22
  302. package/src/sass/mixins/private/_dropdown-mixins.scss +60 -0
  303. package/src/{less/mixins/private/filter-button-mixins.less → sass/mixins/private/_filter-button-mixins.scss} +6 -2
  304. package/src/sass/mixins/private/_filter-menu-mixins.scss +45 -0
  305. package/src/sass/mixins/private/_generated-icon-mixins.scss +517 -0
  306. package/src/sass/mixins/private/_icon-mixins.scss +12 -0
  307. package/src/sass/mixins/private/_listbox-mixins.scss +48 -0
  308. package/src/sass/mixins/private/_menu-mixins.scss +30 -0
  309. package/src/{less/mixins/private/selection-list-mixins.less → sass/mixins/private/_selection-list-mixins.scss} +3 -3
  310. package/src/sass/mixins/private/_token-mixins.scss +124 -0
  311. package/src/sass/mixins/public/_typography-mixins.scss +136 -0
  312. package/src/sass/mixins/public/_utility-mixins.scss +62 -0
  313. package/src/{less/page-grid/page-grid.less → sass/page-grid/page-grid.scss} +22 -22
  314. package/src/{less/page-notice/page-notice.less → sass/page-notice/page-notice.scss} +66 -26
  315. package/src/{less → sass}/page-notice/stories/page-notice.stories.js +14 -14
  316. package/src/{less → sass}/page-notice/stories/test.stories.js +7 -7
  317. package/src/{less/pagination/pagination.less → sass/pagination/pagination.scss} +28 -14
  318. package/src/{less → sass}/pagination/stories/button-cascade.stories.js +6 -6
  319. package/src/{less → sass}/pagination/stories/buttons.stories.js +4 -4
  320. package/src/{less → sass}/pagination/stories/link-cascade.stories.js +6 -6
  321. package/src/{less → sass}/pagination/stories/links.stories.js +4 -4
  322. package/src/{less → sass}/pagination/stories/overflow.stories.js +20 -20
  323. package/src/{less/panel-dialog/panel-dialog.less → sass/panel-dialog/panel-dialog.scss} +19 -16
  324. package/src/{less → sass}/panel-dialog/stories/panel-dialog.stories.js +7 -7
  325. package/src/{less/phone-input/phone-input.less → sass/phone-input/phone-input.scss} +47 -56
  326. package/src/{less → sass}/phone-input/stories/phone-input.stories.js +56 -56
  327. package/src/sass/progress-bar/progress-bar.scss +51 -0
  328. package/src/{less/progress-bar-expressive/progress-bar-expressive.less → sass/progress-bar-expressive/progress-bar-expressive.scss} +19 -20
  329. package/src/{less/progress-spinner/progress-spinner.less → sass/progress-spinner/progress-spinner.scss} +3 -3
  330. package/src/{less → sass}/progress-spinner/stories/progress-spinner.stories.js +4 -4
  331. package/src/{less/progress-stepper/progress-stepper.less → sass/progress-stepper/progress-stepper.scss} +55 -30
  332. package/src/{less/radio/radio.less → sass/radio/radio.scss} +25 -24
  333. package/src/{less/section-notice/section-notice.less → sass/section-notice/section-notice.scss} +42 -18
  334. package/src/{less → sass}/section-notice/stories/icon-16.stories.js +14 -14
  335. package/src/{less → sass}/section-notice/stories/iconless.stories.js +4 -4
  336. package/src/{less → sass}/section-notice/stories/test.stories.js +4 -4
  337. package/src/{less/section-title/section-title.less → sass/section-title/section-title.scss} +15 -11
  338. package/src/{less → sass}/section-title/stories/rtl.stories.js +3 -3
  339. package/src/{less → sass}/section-title/stories/section-title.stories.js +4 -4
  340. package/src/{less/segmented-buttons/segmented-buttons.less → sass/segmented-buttons/segmented-buttons.scss} +8 -8
  341. package/src/{less → sass}/segmented-buttons/stories/segmented-buttons.stories.js +2 -2
  342. package/src/{less/select/select.less → sass/select/select.scss} +53 -18
  343. package/src/{less → sass}/select/stories/cascade.stories.js +3 -3
  344. package/src/{less → sass}/select/stories/default.stories.js +9 -9
  345. package/src/{less → sass}/select/stories/floating-label.stories.js +4 -4
  346. package/src/{less/signal/signal.less → sass/signal/signal.scss} +9 -6
  347. package/src/{less/skeleton/skeleton.less → sass/skeleton/skeleton.scss} +23 -20
  348. package/src/{less/snackbar-dialog/snackbar-dialog.less → sass/snackbar-dialog/snackbar-dialog.scss} +30 -11
  349. package/src/{less/split-button/split-button.less → sass/split-button/split-button.scss} +1 -1
  350. package/src/{less → sass}/split-button/stories/base.stories.js +13 -13
  351. package/src/{less → sass}/split-button/stories/rtl.stories.js +6 -6
  352. package/src/{less → sass}/split-button/stories/size.stories.js +2 -2
  353. package/src/{less/star-rating/star-rating.less → sass/star-rating/star-rating.scss} +14 -14
  354. package/src/{less/star-rating-select/star-rating-select.less → sass/star-rating-select/star-rating-select.scss} +16 -15
  355. package/src/{less/switch/switch.less → sass/switch/switch.scss} +48 -20
  356. package/src/{less/tabs/tabs.less → sass/tabs/tabs.scss} +17 -7
  357. package/src/{less → sass}/textbox/stories/icon.stories.js +34 -18
  358. package/src/{less → sass}/textbox/stories/rtl/icon.stories.js +27 -11
  359. package/src/sass/textbox/stories/rtl/textbox.stories.js +45 -0
  360. package/src/{less → sass}/textbox/stories/textbox.stories.js +24 -2
  361. package/src/sass/textbox/textbox.scss +238 -0
  362. package/src/{less/toast-dialog/toast-dialog.less → sass/toast-dialog/toast-dialog.scss} +67 -23
  363. package/src/{less → sass}/toggle-button/stories/gallery-layout.stories.js +3 -3
  364. package/src/{less → sass}/toggle-button/stories/list-layout.stories.js +3 -3
  365. package/src/{less/toggle-button/toggle-button.less → sass/toggle-button/toggle-button.scss} +6 -1
  366. package/src/sass/toggle-button-group/stories/gallery-layout-exceptions.stories.js +471 -0
  367. package/src/sass/toggle-button-group/stories/gallery-layout.stories.js +564 -0
  368. package/src/sass/toggle-button-group/stories/list-layout-exceptions.stories.js +507 -0
  369. package/src/sass/toggle-button-group/stories/list-layout.stories.js +638 -0
  370. package/src/sass/toggle-button-group/stories/minimal-layout-exceptions.stories.js +291 -0
  371. package/src/sass/toggle-button-group/stories/minimal-layout.stories.js +289 -0
  372. package/src/sass/toggle-button-group/toggle-button-group.scss +342 -0
  373. package/src/{less → sass}/tooltip/stories/pointer.stories.js +12 -12
  374. package/src/{less → sass}/tooltip/stories/tooltip.stories.js +3 -3
  375. package/src/sass/tooltip/tooltip.scss +118 -0
  376. package/src/{less → sass}/tourtip/stories/tourtip.stories.js +5 -5
  377. package/src/{less/tourtip/tourtip.less → sass/tourtip/tourtip.scss} +41 -33
  378. package/src/{less/typography/typography.less → sass/typography/typography.scss} +24 -21
  379. package/src/{less/utility/utility.less → sass/utility/utility.scss} +13 -13
  380. package/src/sass/variables/_variables.scss +64 -0
  381. package/src/{less/video/video.less → sass/video/video.scss} +3 -3
  382. package/src/svg/icons.svg +21 -21
  383. package/src/tokens/evo-core.css +139 -67
  384. package/src/tokens/evo-dark.css +57 -62
  385. package/src/tokens/evo-light.css +76 -76
  386. package/svg.svg +21 -21
  387. package/_cdn/skin/v17.5.0/skin-default.min.css +0 -76
  388. package/_cdn/skin/v17.5.0/skin-full.min.css +0 -160
  389. package/_cdn/skin/v17.5.0/skin-headless.min.css +0 -6
  390. package/dist/variables/variables.less +0 -70
  391. package/less[ds-4].less +0 -3
  392. package/src/less/avatar/avatar.less +0 -134
  393. package/src/less/badge/badge.less +0 -16
  394. package/src/less/bundles/skin-default.less +0 -3
  395. package/src/less/bundles/skin-full.less +0 -4
  396. package/src/less/bundles/skin-headless.less +0 -70
  397. package/src/less/cta-button/cta-button.less +0 -79
  398. package/src/less/filter-button/filter-button.less +0 -80
  399. package/src/less/global/global.less +0 -37
  400. package/src/less/icon/generated/icon.less +0 -2905
  401. package/src/less/icon/icon.less +0 -62
  402. package/src/less/icon-button/stories/alignment.stories.js +0 -28
  403. package/src/less/image-placeholder/image-placeholder.less +0 -9
  404. package/src/less/infotip/infotip.less +0 -126
  405. package/src/less/link/link.less +0 -44
  406. package/src/less/listbox-button/listbox-button.less +0 -184
  407. package/src/less/marketsans/marketsans.less +0 -45
  408. package/src/less/mixins/private/bubble-mixins.less +0 -166
  409. package/src/less/mixins/private/button-mixins.less +0 -95
  410. package/src/less/mixins/private/dropdown-mixins.less +0 -44
  411. package/src/less/mixins/private/filter-menu-mixins.less +0 -31
  412. package/src/less/mixins/private/generated-icon-mixins.less +0 -517
  413. package/src/less/mixins/private/icon-mixins.less +0 -17
  414. package/src/less/mixins/private/listbox-mixins.less +0 -35
  415. package/src/less/mixins/private/menu-mixins.less +0 -21
  416. package/src/less/mixins/private/token-mixins.less +0 -100
  417. package/src/less/progress-bar/progress-bar.less +0 -35
  418. package/src/less/textbox/stories/rtl/textbox.stories.js +0 -17
  419. package/src/less/textbox/textbox.less +0 -181
  420. package/src/less/toggle-button-group/stories/gallery-layout.stories.js +0 -657
  421. package/src/less/toggle-button-group/stories/list-layout.stories.js +0 -611
  422. package/src/less/toggle-button-group/stories/minimal-layout.stories.js +0 -341
  423. package/src/less/toggle-button-group/toggle-button-group.less +0 -111
  424. package/src/less/tooltip/tooltip.less +0 -109
  425. package/src/less/variables/variables.less +0 -70
  426. /package/src/{less → sass}/alert-dialog/stories/alert-dialog.stories.js +0 -0
  427. /package/src/{less → sass}/avatar/stories/avatar.stories.js +0 -0
  428. /package/src/{less → sass}/badge/stories/badge.stories.js +0 -0
  429. /package/src/{less → sass}/button/stories/destructive-button/borderless.stories.js +0 -0
  430. /package/src/{less → sass}/checkbox/stories/checked.stories.js +0 -0
  431. /package/src/{less → sass}/checkbox/stories/mixed.stories.js +0 -0
  432. /package/src/{less → sass}/checkbox/stories/unchecked.stories.js +0 -0
  433. /package/src/{less → sass}/chip/stories/static-chip.stories.js +0 -0
  434. /package/src/{less → sass}/confirm-dialog/stories/confirm-dialog.stories.js +0 -0
  435. /package/src/{less → sass}/field/stories/helper-texts-stacked.stories.js +0 -0
  436. /package/src/{less → sass}/filter-button/stories/button.stories.js +0 -0
  437. /package/src/{less → sass}/filter-button/stories/group.stories.js +0 -0
  438. /package/src/{less → sass}/filter-button/stories/link.stories.js +0 -0
  439. /package/src/{less/flag/flag.less → sass/flag/flag.scss} +0 -0
  440. /package/src/{less → sass}/flag/stories/flag.stories.js +0 -0
  441. /package/src/{less → sass}/gh/gh-mixins.less +0 -0
  442. /package/src/{less → sass}/image-placeholder/stories/image-placeholder.stories.js +0 -0
  443. /package/src/{less → sass}/link/stories/link.stories.js +0 -0
  444. /package/src/{less → sass}/menu/stories/misc.stories.js +0 -0
  445. /package/src/{less → sass}/mixins/public/typography-mixins.less +0 -0
  446. /package/src/{less → sass}/mixins/public/utility-mixins.less +0 -0
  447. /package/src/{less → sass}/progress-bar/stories/progress-bar.stories.js +0 -0
  448. /package/src/{less → sass}/progress-bar-expressive/stories/progress-bar-expressive.stories.js +0 -0
  449. /package/src/{less → sass}/progress-stepper/stories/progress-stepper.stories.js +0 -0
  450. /package/src/{less → sass}/radio/stories/checked.stories.js +0 -0
  451. /package/src/{less → sass}/radio/stories/unchecked.stories.js +0 -0
  452. /package/src/{less → sass}/signal/stories/signal.stories.js +0 -0
  453. /package/src/{less → sass}/skeleton/stories/base.stories.js +0 -0
  454. /package/src/{less → sass}/skeleton/stories/composite.stories.js +0 -0
  455. /package/src/{less → sass}/skeleton/stories/rtl.stories.js +0 -0
  456. /package/src/{less → sass}/snackbar-dialog/stories/base.stories.js +0 -0
  457. /package/src/{less → sass}/snackbar-dialog/stories/font-size.stories.js +0 -0
  458. /package/src/{less → sass}/snackbar-dialog/stories/rtl.stories.js +0 -0
  459. /package/src/{less → sass}/star-rating/stories/star-rating.stories.js +0 -0
  460. /package/src/{less → sass}/star-rating-select/stories/star-rating-select.stories.js +0 -0
  461. /package/src/{less → sass}/switch/stories/form.stories.js +0 -0
  462. /package/src/{less → sass}/switch/stories/script.stories.js +0 -0
  463. /package/src/{less → sass}/tabs/stories/fake-tabs/block.stories.js +0 -0
  464. /package/src/{less → sass}/tabs/stories/fake-tabs/inlineBlock.stories.js +0 -0
  465. /package/src/{less → sass}/tabs/stories/tabs/block.stories.js +0 -0
  466. /package/src/{less → sass}/tabs/stories/tabs/inlineBlock.stories.js +0 -0
  467. /package/src/{less → sass}/toast-dialog/stories/toast-dialog.stories.js +0 -0
  468. /package/src/{less → sass}/toggle-button/stories/gallery-layout-responsive.stories.js +0 -0
  469. /package/src/{less → sass}/toggle-button/stories/minimal-layout.stories.js +0 -0
package/src/{less → sass}/icon-button/stories/buttons.stories.js RENAMED
@@ -2,17 +2,17 @@ export default { title: "Skin/Icon Button/Buttons" };
2
2
 
3
3
  export const base = () => `
4
4
  <button class="icon-btn icon-btn--large" type="button" aria-label="Save">
5
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
5
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
6
6
  <use href="#icon-save-24"></use>
7
7
  </svg>
8
8
  </button>
9
9
  <button class="icon-btn" type="button" aria-label="Save">
10
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
10
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
11
11
  <use href="#icon-save-20"></use>
12
12
  </svg>
13
13
  </button>
14
14
  <button class="icon-btn icon-btn--small" type="button" aria-label="Save">
15
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
15
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
16
16
  <use href="#icon-save-16"></use>
17
17
  </svg>
18
18
  </button>
@@ -21,21 +21,21 @@ export const base = () => `
21
21
  export const baseSpinner = () => `
22
22
  <button class="icon-btn icon-btn--large" type="button" aria-label="Save">
23
23
  <span class="progress-spinner progress-spinner--large">
24
- <svg aria-hidden="true" class="icon icon--spinner-24" height="24" width="24">
24
+ <svg aria-hidden="true" class="icon icon--24" height="24" width="24">
25
25
  <use href="#icon-spinner-24"></use>
26
26
  </svg>
27
27
  </span>
28
28
  </button>
29
29
  <button class="icon-btn" type="button" aria-label="Save">
30
30
  <span class="progress-spinner">
31
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
31
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
32
32
  <use href="#icon-spinner-20"></use>
33
33
  </svg>
34
34
  </span>
35
35
  </button>
36
36
  <button class="icon-btn icon-btn--small" type="button" aria-label="Save">
37
37
  <span class="progress-spinner progress-spinner--small">
38
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
38
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
39
39
  <use href="#icon-spinner-20"></use>
40
40
  </svg>
41
41
  </span>
@@ -44,17 +44,17 @@ export const baseSpinner = () => `
44
44
 
45
45
  export const baseDisabled = () => `
46
46
  <button class="icon-btn icon-btn--large" type="button" aria-label="Save" disabled>
47
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
47
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
48
48
  <use href="#icon-save-24"></use>
49
49
  </svg>
50
50
  </button>
51
51
  <button class="icon-btn" type="button" aria-label="Save" disabled>
52
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
52
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
53
53
  <use href="#icon-save-20"></use>
54
54
  </svg>
55
55
  </button>
56
56
  <button class="icon-btn icon-btn--small" type="button" aria-label="Save" disabled>
57
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
57
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
58
58
  <use href="#icon-save-16"></use>
59
59
  </svg>
60
60
  </button>
@@ -62,17 +62,17 @@ export const baseDisabled = () => `
62
62
 
63
63
  export const primary = () => `
64
64
  <button class="icon-btn icon-btn--large icon-btn--primary" type="button" aria-label="Save">
65
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
65
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
66
66
  <use href="#icon-save-24"></use>
67
67
  </svg>
68
68
  </button>
69
69
  <button class="icon-btn icon-btn--primary" type="button" aria-label="Save">
70
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
70
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
71
71
  <use href="#icon-save-20"></use>
72
72
  </svg>
73
73
  </button>
74
74
  <button class="icon-btn icon-btn--small icon-btn--primary" type="button" aria-label="Save">
75
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
75
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
76
76
  <use href="#icon-save-16"></use>
77
77
  </svg>
78
78
  </button>
@@ -81,21 +81,21 @@ export const primary = () => `
81
81
  export const primarySpinner = () => `
82
82
  <button class="icon-btn icon-btn--large icon-btn--primary" type="button" aria-label="Save">
83
83
  <span class="progress-spinner progress-spinner--large">
84
- <svg aria-hidden="true" class="icon icon--spinner-24" height="24" width="24">
84
+ <svg aria-hidden="true" class="icon icon--24" height="24" width="24">
85
85
  <use href="#icon-spinner-24"></use>
86
86
  </svg>
87
87
  </span>
88
88
  </button>
89
89
  <button class="icon-btn icon-btn--primary" type="button" aria-label="Save">
90
90
  <span class="progress-spinner">
91
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
91
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
92
92
  <use href="#icon-spinner-20"></use>
93
93
  </svg>
94
94
  </span>
95
95
  </button>
96
96
  <button class="icon-btn icon-btn--small icon-btn--primary" type="button" aria-label="Save">
97
97
  <span class="progress-spinner progress-spinner--small">
98
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
98
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
99
99
  <use href="#icon-spinner-20"></use>
100
100
  </svg>
101
101
  </span>
@@ -104,17 +104,17 @@ export const primarySpinner = () => `
104
104
 
105
105
  export const primaryDisabled = () => `
106
106
  <button class="icon-btn icon-btn--large icon-btn--primary" type="button" aria-label="Save" disabled>
107
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
107
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
108
108
  <use href="#icon-save-24"></use>
109
109
  </svg>
110
110
  </button>
111
111
  <button class="icon-btn icon-btn--primary" type="button" aria-label="Save" disabled>
112
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
112
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
113
113
  <use href="#icon-save-20"></use>
114
114
  </svg>
115
115
  </button>
116
116
  <button class="icon-btn icon-btn--small icon-btn--primary" type="button" aria-label="Save" disabled>
117
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
117
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
118
118
  <use href="#icon-save-16"></use>
119
119
  </svg>
120
120
  </button>
@@ -122,17 +122,17 @@ export const primaryDisabled = () => `
122
122
 
123
123
  export const secondary = () => `
124
124
  <button class="icon-btn icon-btn--large icon-btn--secondary" type="button" aria-label="Save">
125
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
125
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
126
126
  <use href="#icon-save-24"></use>
127
127
  </svg>
128
128
  </button>
129
129
  <button class="icon-btn icon-btn--secondary" type="button" aria-label="Save">
130
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
130
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
131
131
  <use href="#icon-save-20"></use>
132
132
  </svg>
133
133
  </button>
134
134
  <button class="icon-btn icon-btn--small icon-btn--secondary" type="button" aria-label="Save">
135
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
135
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
136
136
  <use href="#icon-save-16"></use>
137
137
  </svg>
138
138
  </button>
@@ -141,21 +141,21 @@ export const secondary = () => `
141
141
  export const secondarySpinner = () => `
142
142
  <button class="icon-btn icon-btn--large icon-btn--secondary" type="button" aria-label="Save">
143
143
  <span class="progress-spinner progress-spinner--large">
144
- <svg aria-hidden="true" class="icon icon--spinner-24" height="24" width="24">
144
+ <svg aria-hidden="true" class="icon icon--24" height="24" width="24">
145
145
  <use href="#icon-spinner-24"></use>
146
146
  </svg>
147
147
  </span>
148
148
  </button>
149
149
  <button class="icon-btn icon-btn--secondary" type="button" aria-label="Save">
150
150
  <span class="progress-spinner">
151
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
151
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
152
152
  <use href="#icon-spinner-20"></use>
153
153
  </svg>
154
154
  </span>
155
155
  </button>
156
156
  <button class="icon-btn icon-btn--small icon-btn--secondary" type="button" aria-label="Save">
157
157
  <span class="progress-spinner progress-spinner--small">
158
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
158
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
159
159
  <use href="#icon-spinner-20"></use>
160
160
  </svg>
161
161
  </span>
@@ -164,17 +164,17 @@ export const secondarySpinner = () => `
164
164
 
165
165
  export const secondaryDisabled = () => `
166
166
  <button class="icon-btn icon-btn--large icon-btn--secondary" type="button" aria-label="Save" disabled>
167
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
167
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
168
168
  <use href="#icon-save-24"></use>
169
169
  </svg>
170
170
  </button>
171
171
  <button class="icon-btn icon-btn--secondary" type="button" aria-label="Save" disabled>
172
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
172
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
173
173
  <use href="#icon-save-20"></use>
174
174
  </svg>
175
175
  </button>
176
176
  <button class="icon-btn icon-btn--small icon-btn--secondary" type="button" aria-label="Save" disabled>
177
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
177
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
178
178
  <use href="#icon-save-16"></use>
179
179
  </svg>
180
180
  </button>
@@ -182,17 +182,17 @@ export const secondaryDisabled = () => `
182
182
 
183
183
  export const tertiary = () => `
184
184
  <button class="icon-btn icon-btn--large icon-btn--tertiary" type="button" aria-label="Save">
185
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
185
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
186
186
  <use href="#icon-save-24"></use>
187
187
  </svg>
188
188
  </button>
189
189
  <button class="icon-btn icon-btn--tertiary" type="button" aria-label="Save">
190
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
190
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
191
191
  <use href="#icon-save-20"></use>
192
192
  </svg>
193
193
  </button>
194
194
  <button class="icon-btn icon-btn--small icon-btn--tertiary" type="button" aria-label="Save">
195
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
195
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
196
196
  <use href="#icon-save-16"></use>
197
197
  </svg>
198
198
  </button>
@@ -201,21 +201,21 @@ export const tertiary = () => `
201
201
  export const tertiarySpinner = () => `
202
202
  <button class="icon-btn icon-btn--large icon-btn--tertiary" type="button" aria-label="Save">
203
203
  <span class="progress-spinner progress-spinner--large">
204
- <svg aria-hidden="true" class="icon icon--spinner-24" height="24" width="24">
204
+ <svg aria-hidden="true" class="icon icon--24" height="24" width="24">
205
205
  <use href="#icon-spinner-24"></use>
206
206
  </svg>
207
207
  </span>
208
208
  </button>
209
209
  <button class="icon-btn icon-btn--tertiary" type="button" aria-label="Save">
210
210
  <span class="progress-spinner">
211
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
211
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
212
212
  <use href="#icon-spinner-20"></use>
213
213
  </svg>
214
214
  </span>
215
215
  </button>
216
216
  <button class="icon-btn icon-btn--small icon-btn--tertiary" type="button" aria-label="Save">
217
217
  <span class="progress-spinner progress-spinner--small">
218
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
218
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
219
219
  <use href="#icon-spinner-20"></use>
220
220
  </svg>
221
221
  </span>
@@ -224,17 +224,17 @@ export const tertiarySpinner = () => `
224
224
 
225
225
  export const tertiaryDisabled = () => `
226
226
  <button class="icon-btn icon-btn--large icon-btn--tertiary" type="button" aria-label="Save" disabled>
227
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
227
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
228
228
  <use href="#icon-save-24"></use>
229
229
  </svg>
230
230
  </button>
231
231
  <button class="icon-btn icon-btn--tertiary" type="button" aria-label="Save" disabled>
232
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
232
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
233
233
  <use href="#icon-save-20"></use>
234
234
  </svg>
235
235
  </button>
236
236
  <button class="icon-btn icon-btn--small icon-btn--tertiary" type="button" aria-label="Save" disabled>
237
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
237
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
238
238
  <use href="#icon-save-16"></use>
239
239
  </svg>
240
240
  </button>
package/src/{less → sass}/icon-button/stories/links.stories.js RENAMED
@@ -2,17 +2,17 @@ export default { title: "Skin/Icon Button/Links" };
2
2
 
3
3
  export const base = () => `
4
4
  <a aria-label="settings" class="icon-link icon-link--large" href="https://www.ebay.com">
5
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
5
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
6
6
  <use href="#icon-save-24"></use>
7
7
  </svg>
8
8
  </a>
9
9
  <a aria-label="settings" class="icon-link" href="https://www.ebay.com">
10
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
10
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
11
11
  <use href="#icon-save-20"></use>
12
12
  </svg>
13
13
  </a>
14
14
  <a aria-label="settings" class="icon-link icon-link--small" href="https://www.ebay.com">
15
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
15
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
16
16
  <use href="#icon-save-16"></use>
17
17
  </svg>
18
18
  </a>
@@ -21,21 +21,21 @@ export const base = () => `
21
21
  export const baseSpinner = () => `
22
22
  <a aria-label="loading" class="icon-link icon-link--large" href="https://www.ebay.com">
23
23
  <span class="progress-spinner progress-spinner--large">
24
- <svg aria-hidden="true" class="icon icon--spinner-24" height="24" width="24">
24
+ <svg aria-hidden="true" class="icon icon--24" height="24" width="24">
25
25
  <use href="#icon-spinner-24"></use>
26
26
  </svg>
27
27
  </span>
28
28
  </a>
29
29
  <a aria-label="loading" class="icon-link" href="https://www.ebay.com">
30
30
  <span class="progress-spinner">
31
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
31
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
32
32
  <use href="#icon-spinner-20"></use>
33
33
  </svg>
34
34
  </span>
35
35
  </a>
36
36
  <a aria-label="loading" class="icon-link icon-link--small" href="https://www.ebay.com">
37
37
  <span class="progress-spinner progress-spinner--small">
38
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
38
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
39
39
  <use href="#icon-spinner-20"></use>
40
40
  </svg>
41
41
  </span>
@@ -44,17 +44,17 @@ export const baseSpinner = () => `
44
44
 
45
45
  export const baseDisabled = () => `
46
46
  <a aria-label="settings" class="icon-link icon-link--large">
47
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
47
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
48
48
  <use href="#icon-save-24"></use>
49
49
  </svg>
50
50
  </a>
51
51
  <a aria-label="settings" class="icon-link">
52
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
52
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
53
53
  <use href="#icon-save-20"></use>
54
54
  </svg>
55
55
  </a>
56
56
  <a aria-label="settings" class="icon-link icon-link--small">
57
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
57
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
58
58
  <use href="#icon-save-16"></use>
59
59
  </svg>
60
60
  </a>
@@ -62,17 +62,17 @@ export const baseDisabled = () => `
62
62
 
63
63
  export const primary = () => `
64
64
  <a aria-label="loading" class="icon-link icon-link--large icon-link--primary" href="https://www.ebay.com">
65
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
65
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
66
66
  <use href="#icon-save-24"></use>
67
67
  </svg>
68
68
  </a>
69
69
  <a aria-label="loading" class="icon-link icon-link--primary" href="https://www.ebay.com">
70
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
70
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
71
71
  <use href="#icon-save-20"></use>
72
72
  </svg>
73
73
  </a>
74
74
  <a aria-label="loading" class="icon-link icon-link--small icon-link--primary" href="https://www.ebay.com">
75
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
75
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
76
76
  <use href="#icon-save-16"></use>
77
77
  </svg>
78
78
  </a>
@@ -81,21 +81,21 @@ export const primary = () => `
81
81
  export const primarySpinner = () => `
82
82
  <a aria-label="loading" class="icon-link icon-link--large icon-link--primary" href="https://www.ebay.com">
83
83
  <span class="progress-spinner progress-spinner--large">
84
- <svg aria-hidden="true" class="icon icon--spinner-24" height="24" width="24">
84
+ <svg aria-hidden="true" class="icon icon--24" height="24" width="24">
85
85
  <use href="#icon-spinner-24"></use>
86
86
  </svg>
87
87
  </span>
88
88
  </a>
89
89
  <a aria-label="loading" class="icon-link icon-link--primary" href="https://www.ebay.com">
90
90
  <span class="progress-spinner">
91
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
91
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
92
92
  <use href="#icon-spinner-20"></use>
93
93
  </svg>
94
94
  </span>
95
95
  </a>
96
96
  <a aria-label="loading" class="icon-link icon-link--small icon-link--primary" href="https://www.ebay.com">
97
97
  <span class="progress-spinner progress-spinner--small">
98
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
98
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
99
99
  <use href="#icon-spinner-20"></use>
100
100
  </svg>
101
101
  </span>
@@ -104,17 +104,17 @@ export const primarySpinner = () => `
104
104
 
105
105
  export const primaryDisabled = () => `
106
106
  <a aria-label="loading" class="icon-link icon-link--large icon-link--primary">
107
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
107
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
108
108
  <use href="#icon-save-24"></use>
109
109
  </svg>
110
110
  </a>
111
111
  <a aria-label="loading" class="icon-link icon-link--primary">
112
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
112
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
113
113
  <use href="#icon-save-20"></use>
114
114
  </svg>
115
115
  </a>
116
116
  <a aria-label="loading" class="icon-link icon-link--small icon-link--primary">
117
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
117
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
118
118
  <use href="#icon-save-16"></use>
119
119
  </svg>
120
120
  </a>
@@ -122,17 +122,17 @@ export const primaryDisabled = () => `
122
122
 
123
123
  export const secondary = () => `
124
124
  <a aria-label="loading" class="icon-link icon-link--large icon-link--secondary" href="https://www.ebay.com">
125
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
125
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
126
126
  <use href="#icon-save-24"></use>
127
127
  </svg>
128
128
  </a>
129
129
  <a aria-label="loading" class="icon-link icon-link--secondary" href="https://www.ebay.com">
130
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
130
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
131
131
  <use href="#icon-save-20"></use>
132
132
  </svg>
133
133
  </a>
134
134
  <a aria-label="loading" class="icon-link icon-link--small icon-link--secondary" href="https://www.ebay.com">
135
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
135
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
136
136
  <use href="#icon-save-16"></use>
137
137
  </svg>
138
138
  </a>
@@ -141,21 +141,21 @@ export const secondary = () => `
141
141
  export const secondarySpinner = () => `
142
142
  <a aria-label="loading" class="icon-link icon-link--large icon-link--secondary" href="https://www.ebay.com">
143
143
  <span class="progress-spinner progress-spinner--large">
144
- <svg aria-hidden="true" class="icon icon--spinner-24" height="24" width="24">
144
+ <svg aria-hidden="true" class="icon icon--24" height="24" width="24">
145
145
  <use href="#icon-spinner-24"></use>
146
146
  </svg>
147
147
  </span>
148
148
  </a>
149
149
  <a aria-label="loading" class="icon-link icon-link--secondary" href="https://www.ebay.com">
150
150
  <span class="progress-spinner">
151
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
151
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
152
152
  <use href="#icon-spinner-20"></use>
153
153
  </svg>
154
154
  </span>
155
155
  </a>
156
156
  <a aria-label="loading" class="icon-link icon-link--small icon-link--secondary" href="https://www.ebay.com">
157
157
  <span class="progress-spinner progress-spinner--small">
158
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
158
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
159
159
  <use href="#icon-spinner-20"></use>
160
160
  </svg>
161
161
  </span>
@@ -164,17 +164,17 @@ export const secondarySpinner = () => `
164
164
 
165
165
  export const secondaryDisabled = () => `
166
166
  <a aria-label="loading" class="icon-link icon-link--large icon-link--secondary">
167
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
167
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
168
168
  <use href="#icon-save-24"></use>
169
169
  </svg>
170
170
  </a>
171
171
  <a aria-label="loading" class="icon-link icon-link--secondary">
172
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
172
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
173
173
  <use href="#icon-save-20"></use>
174
174
  </svg>
175
175
  </a>
176
176
  <a aria-label="loading" class="icon-link icon-link--small icon-link--secondary">
177
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
177
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
178
178
  <use href="#icon-save-16"></use>
179
179
  </svg>
180
180
  </a>
@@ -182,17 +182,17 @@ export const secondaryDisabled = () => `
182
182
 
183
183
  export const tertiary = () => `
184
184
  <a aria-label="loading" class="icon-link icon-link--large icon-link--tertiary" href="https://www.ebay.com">
185
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
185
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
186
186
  <use href="#icon-save-24"></use>
187
187
  </svg>
188
188
  </a>
189
189
  <a aria-label="loading" class="icon-link icon-link--tertiary" href="https://www.ebay.com">
190
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
190
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
191
191
  <use href="#icon-save-20"></use>
192
192
  </svg>
193
193
  </a>
194
194
  <a aria-label="loading" class="icon-link icon-link--small icon-link--tertiary" href="https://www.ebay.com">
195
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
195
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
196
196
  <use href="#icon-save-16"></use>
197
197
  </svg>
198
198
  </a>
@@ -201,21 +201,21 @@ export const tertiary = () => `
201
201
  export const tertiarySpinner = () => `
202
202
  <a aria-label="loading" class="icon-link icon-link--large icon-link--tertiary" href="https://www.ebay.com">
203
203
  <span class="progress-spinner progress-spinner--large">
204
- <svg aria-hidden="true" class="icon icon--spinner-24" height="24" width="24">
204
+ <svg aria-hidden="true" class="icon icon--24" height="24" width="24">
205
205
  <use href="#icon-spinner-24"></use>
206
206
  </svg>
207
207
  </span>
208
208
  </a>
209
209
  <a aria-label="loading" class="icon-link icon-link--tertiary" href="https://www.ebay.com">
210
210
  <span class="progress-spinner">
211
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
211
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
212
212
  <use href="#icon-spinner-20"></use>
213
213
  </svg>
214
214
  </span>
215
215
  </a>
216
216
  <a aria-label="loading" class="icon-link icon-link--small icon-link--tertiary" href="https://www.ebay.com">
217
217
  <span class="progress-spinner progress-spinner--small">
218
- <svg aria-hidden="true" class="icon icon--spinner-20" height="24" width="24">
218
+ <svg aria-hidden="true" class="icon icon--20" height="24" width="24">
219
219
  <use href="#icon-spinner-20"></use>
220
220
  </svg>
221
221
  </span>
@@ -224,17 +224,17 @@ export const tertiarySpinner = () => `
224
224
 
225
225
  export const tertiaryDisabled = () => `
226
226
  <a aria-label="loading" class="icon-link icon-link--large icon-link--tertiary">
227
- <svg class="icon icon--save-24" width="16" height="16" aria-hidden="true">
227
+ <svg class="icon icon--24" width="16" height="16" aria-hidden="true">
228
228
  <use href="#icon-save-24"></use>
229
229
  </svg>
230
230
  </a>
231
231
  <a aria-label="loading" class="icon-link icon-link--tertiary">
232
- <svg class="icon icon--save-20" width="16" height="16" aria-hidden="true">
232
+ <svg class="icon icon--20" width="16" height="16" aria-hidden="true">
233
233
  <use href="#icon-save-20"></use>
234
234
  </svg>
235
235
  </a>
236
236
  <a aria-label="loading" class="icon-link icon-link--small icon-link--tertiary">
237
- <svg class="icon icon--save-16" width="16" height="16" aria-hidden="true">
237
+ <svg class="icon icon--16" width="16" height="16" aria-hidden="true">
238
238
  <use href="#icon-save-16"></use>
239
239
  </svg>
240
240
  </a>
package/src/sass/image-placeholder/image-placeholder.scss ADDED
@@ -0,0 +1,10 @@
1
+ @import "../variables/variables";
2
+ @import "../mixins/private/token-mixins";
3
+
4
+ svg.image-placeholder {
5
+ @include color-token(color-foreground-primary);
6
+
7
+ fill: currentColor;
8
+ height: inherit;
9
+ width: inherit;
10
+ }