@ebay/skin 17.5.0-next.0 → 18.0.0-next.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 (479) hide show
  1. package/.changeset/bright-kiwis-repeat.md +5 -0
  2. package/.changeset/chilled-games-stare.md +5 -0
  3. package/.changeset/gold-radios-reply.md +5 -0
  4. package/.changeset/light-lions-explode.md +5 -0
  5. package/.changeset/pre.json +7 -5
  6. package/.changeset/ten-rockets-double.md +5 -0
  7. package/.changeset/wild-donkeys-attack.md +5 -0
  8. package/.github/workflows/pages-html-proofer.yml +1 -1
  9. package/.prettierignore +0 -1
  10. package/.storybook/main.js +4 -11
  11. package/.storybook/preview.js +1 -1
  12. package/.stylelintrc +16 -24
  13. package/CHANGELOG.md +32 -0
  14. package/CONTRIBUTING.md +1 -1
  15. package/bundles.browser.json +1 -0
  16. package/bundles.css +1 -0
  17. package/bundles.js +1 -0
  18. package/bundles.mjs +1 -0
  19. package/chart-legend.browser.json +1 -0
  20. package/chart-legend.css +1 -0
  21. package/chart-legend.js +1 -0
  22. package/chart-legend.mjs +1 -0
  23. package/dist/alert-dialog/alert-dialog.css +84 -72
  24. package/dist/alert-dialog/alert-dialog.css.map +1 -0
  25. package/dist/avatar/avatar.css +81 -62
  26. package/dist/avatar/avatar.css.map +1 -0
  27. package/dist/badge/badge.css +16 -11
  28. package/dist/badge/badge.css.map +1 -0
  29. package/dist/breadcrumbs/breadcrumbs.css +85 -58
  30. package/dist/breadcrumbs/breadcrumbs.css.map +1 -0
  31. package/dist/bundles/skin-default.css +10068 -0
  32. package/dist/bundles/skin-default.css.map +1 -0
  33. package/dist/bundles/skin-full.css +10252 -0
  34. package/dist/bundles/skin-full.css.map +1 -0
  35. package/dist/bundles/skin-headless.css +9680 -0
  36. package/dist/bundles/skin-headless.css.map +1 -0
  37. package/dist/button/button.css +590 -415
  38. package/dist/button/button.css.map +1 -0
  39. package/dist/calendar/calendar.css +148 -102
  40. package/dist/calendar/calendar.css.map +1 -0
  41. package/dist/carousel/carousel.css +231 -205
  42. package/dist/carousel/carousel.css.map +1 -0
  43. package/dist/chart-legend/chart-legend.css +77 -0
  44. package/dist/chart-legend/chart-legend.css.map +1 -0
  45. package/dist/checkbox/checkbox.css +77 -54
  46. package/dist/checkbox/checkbox.css.map +1 -0
  47. package/dist/chip/chip.css +41 -34
  48. package/dist/chip/chip.css.map +1 -0
  49. package/dist/chips-combobox/chips-combobox.css +77 -62
  50. package/dist/chips-combobox/chips-combobox.css.map +1 -0
  51. package/dist/combobox/combobox.css +244 -161
  52. package/dist/combobox/combobox.css.map +1 -0
  53. package/dist/confirm-dialog/confirm-dialog.css +86 -73
  54. package/dist/confirm-dialog/confirm-dialog.css.map +1 -0
  55. package/dist/cta-button/cta-button.css +96 -70
  56. package/dist/cta-button/cta-button.css.map +1 -0
  57. package/dist/date-textbox/date-textbox.css +24 -15
  58. package/dist/date-textbox/date-textbox.css.map +1 -0
  59. package/dist/details/details.css +34 -27
  60. package/dist/details/details.css.map +1 -0
  61. package/dist/donut-chart/donut-chart.css +91 -0
  62. package/dist/donut-chart/donut-chart.css.map +1 -0
  63. package/dist/drawer-dialog/drawer-dialog.css +133 -118
  64. package/dist/drawer-dialog/drawer-dialog.css.map +1 -0
  65. package/dist/education-notice/education-notice.css +62 -34
  66. package/dist/education-notice/education-notice.css.map +1 -0
  67. package/dist/eek/eek.css +97 -74
  68. package/dist/eek/eek.css.map +1 -0
  69. package/dist/field/field.css +87 -53
  70. package/dist/field/field.css.map +1 -0
  71. package/dist/filter-button/filter-button.css +115 -75
  72. package/dist/filter-button/filter-button.css.map +1 -0
  73. package/dist/filter-menu/filter-menu.css +168 -113
  74. package/dist/filter-menu/filter-menu.css.map +1 -0
  75. package/dist/filter-menu-button/filter-menu-button.css +298 -173
  76. package/dist/filter-menu-button/filter-menu-button.css.map +1 -0
  77. package/dist/flag/flag.css +528 -272
  78. package/dist/flag/flag.css.map +1 -0
  79. package/dist/floating-label/floating-label.css +100 -51
  80. package/dist/floating-label/floating-label.css.map +1 -0
  81. package/dist/fullscreen-dialog/fullscreen-dialog.css +112 -99
  82. package/dist/fullscreen-dialog/fullscreen-dialog.css.map +1 -0
  83. package/dist/global/global.css +32 -13
  84. package/dist/global/global.css.map +1 -0
  85. package/dist/icon/icon.css +50 -2946
  86. package/dist/icon/icon.css.map +1 -0
  87. package/dist/icon-button/icon-button.css +307 -212
  88. package/dist/icon-button/icon-button.css.map +1 -0
  89. package/dist/image-placeholder/image-placeholder.css +6 -4
  90. package/dist/image-placeholder/image-placeholder.css.map +1 -0
  91. package/dist/infotip/infotip.css +121 -93
  92. package/dist/infotip/infotip.css.map +1 -0
  93. package/dist/inline-notice/inline-notice.css +16 -9
  94. package/dist/inline-notice/inline-notice.css.map +1 -0
  95. package/dist/lightbox-dialog/lightbox-dialog.css +239 -183
  96. package/dist/lightbox-dialog/lightbox-dialog.css.map +1 -0
  97. package/dist/link/link.css +37 -19
  98. package/dist/link/link.css.map +1 -0
  99. package/dist/listbox/listbox.css +86 -58
  100. package/dist/listbox/listbox.css.map +1 -0
  101. package/dist/listbox-button/listbox-button.css +240 -134
  102. package/dist/listbox-button/listbox-button.css.map +1 -0
  103. package/dist/marketsans/marketsans.css +34 -12
  104. package/dist/marketsans/marketsans.css.map +1 -0
  105. package/dist/menu/menu.css +136 -99
  106. package/dist/menu/menu.css.map +1 -0
  107. package/dist/menu-button/menu-button.css +236 -157
  108. package/dist/menu-button/menu-button.css.map +1 -0
  109. package/dist/mixins/_typography-mixins.scss +136 -0
  110. package/dist/mixins/_utility-mixins.scss +62 -0
  111. package/dist/page-grid/page-grid.css +57 -46
  112. package/dist/page-grid/page-grid.css.map +1 -0
  113. package/dist/page-notice/page-notice.css +142 -85
  114. package/dist/page-notice/page-notice.css.map +1 -0
  115. package/dist/pagination/pagination.css +109 -80
  116. package/dist/pagination/pagination.css.map +1 -0
  117. package/dist/panel-dialog/panel-dialog.css +115 -98
  118. package/dist/panel-dialog/panel-dialog.css.map +1 -0
  119. package/dist/phone-input/phone-input.css +100 -88
  120. package/dist/phone-input/phone-input.css.map +1 -0
  121. package/dist/progress-bar/progress-bar.css +32 -15
  122. package/dist/progress-bar/progress-bar.css.map +1 -0
  123. package/dist/progress-bar-expressive/progress-bar-expressive.css +302 -203
  124. package/dist/progress-bar-expressive/progress-bar-expressive.css.map +1 -0
  125. package/dist/progress-spinner/progress-spinner.css +24 -20
  126. package/dist/progress-spinner/progress-spinner.css.map +1 -0
  127. package/dist/progress-stepper/progress-stepper.css +229 -117
  128. package/dist/progress-stepper/progress-stepper.css.map +1 -0
  129. package/dist/radio/radio.css +71 -52
  130. package/dist/radio/radio.css.map +1 -0
  131. package/dist/section-notice/section-notice.css +102 -72
  132. package/dist/section-notice/section-notice.css.map +1 -0
  133. package/dist/section-title/section-title.css +66 -52
  134. package/dist/section-title/section-title.css.map +1 -0
  135. package/dist/segmented-buttons/segmented-buttons.css +49 -38
  136. package/dist/segmented-buttons/segmented-buttons.css.map +1 -0
  137. package/dist/select/select.css +96 -60
  138. package/dist/select/select.css.map +1 -0
  139. package/dist/signal/signal.css +25 -16
  140. package/dist/signal/signal.css.map +1 -0
  141. package/dist/skeleton/skeleton.css +131 -108
  142. package/dist/skeleton/skeleton.css.map +1 -0
  143. package/dist/snackbar-dialog/snackbar-dialog.css +82 -52
  144. package/dist/snackbar-dialog/snackbar-dialog.css.map +1 -0
  145. package/dist/split-button/split-button.css +3 -1
  146. package/dist/split-button/split-button.css.map +1 -0
  147. package/dist/star-rating/star-rating.css +40 -19
  148. package/dist/star-rating/star-rating.css.map +1 -0
  149. package/dist/star-rating-select/star-rating-select.css +67 -39
  150. package/dist/star-rating-select/star-rating-select.css.map +1 -0
  151. package/dist/svg/icons.svg +21 -21
  152. package/dist/switch/switch.css +119 -78
  153. package/dist/switch/switch.css.map +1 -0
  154. package/dist/tabs/tabs.css +70 -51
  155. package/dist/tabs/tabs.css.map +1 -0
  156. package/dist/textbox/textbox.css +167 -112
  157. package/dist/textbox/textbox.css.map +1 -0
  158. package/dist/toast-dialog/toast-dialog.css +140 -90
  159. package/dist/toast-dialog/toast-dialog.css.map +1 -0
  160. package/dist/toggle-button/toggle-button.css +154 -114
  161. package/dist/toggle-button/toggle-button.css.map +1 -0
  162. package/dist/toggle-button-group/toggle-button-group.css +610 -60
  163. package/dist/toggle-button-group/toggle-button-group.css.map +1 -0
  164. package/dist/tokens/evo-core.css +139 -67
  165. package/dist/tokens/evo-dark.css +57 -62
  166. package/dist/tokens/evo-light.css +76 -76
  167. package/dist/tooltip/tooltip.css +117 -85
  168. package/dist/tooltip/tooltip.css.map +1 -0
  169. package/dist/tourtip/tourtip.css +141 -108
  170. package/dist/tourtip/tourtip.css.map +1 -0
  171. package/dist/typography/typography.css +86 -59
  172. package/dist/typography/typography.css.map +1 -0
  173. package/dist/utility/utility.css +75 -72
  174. package/dist/utility/utility.css.map +1 -0
  175. package/dist/variables/_variables.scss +64 -0
  176. package/dist/video/video.css +46 -34
  177. package/dist/video/video.css.map +1 -0
  178. package/donut-chart.browser.json +1 -0
  179. package/donut-chart.css +1 -0
  180. package/donut-chart.js +1 -0
  181. package/donut-chart.mjs +1 -0
  182. package/gh.browser.json +4 -4
  183. package/index.browser.json +3 -0
  184. package/index.css +3 -0
  185. package/index.js +3 -0
  186. package/index.mjs +3 -0
  187. package/package.json +79 -60
  188. package/postcss.config.js +17 -0
  189. package/scripts/README.md +1 -1
  190. package/scripts/generate-bundle.js +13 -12
  191. package/scripts/generate-images.js +34 -23
  192. package/src/{less/alert-dialog/alert-dialog.less → sass/alert-dialog/alert-dialog.scss} +14 -12
  193. package/src/sass/avatar/avatar.scss +134 -0
  194. package/src/sass/badge/badge.scss +21 -0
  195. package/src/{less/breadcrumbs/breadcrumbs.less → sass/breadcrumbs/breadcrumbs.scss} +23 -12
  196. package/src/{less → sass}/breadcrumbs/stories/button-cascade.stories.js +12 -12
  197. package/src/{less → sass}/breadcrumbs/stories/button-overflow.stories.js +15 -15
  198. package/src/{less → sass}/breadcrumbs/stories/buttons.stories.js +5 -5
  199. package/src/{less → sass}/breadcrumbs/stories/link-cascade.stories.js +12 -12
  200. package/src/{less → sass}/breadcrumbs/stories/link-overflow.stories.js +15 -15
  201. package/src/{less → sass}/breadcrumbs/stories/links.stories.js +5 -5
  202. package/src/sass/bundles/skin-default.scss +9 -0
  203. package/src/sass/bundles/skin-full.scss +10 -0
  204. package/src/sass/bundles/skin-headless.scss +72 -0
  205. package/src/{less/button/button.less → sass/button/button.scss} +183 -69
  206. package/src/{less → sass}/button/stories/button/base.stories.js +5 -5
  207. package/src/{less → sass}/button/stories/button/borderless.stories.js +4 -4
  208. package/src/{less → sass}/button/stories/button/cascade.stories.js +3 -3
  209. package/src/{less → sass}/button/stories/button/dimensions.stories.js +2 -2
  210. package/src/{less → sass}/button/stories/button/primary.stories.js +4 -4
  211. package/src/{less → sass}/button/stories/button/secondary.stories.js +4 -4
  212. package/src/{less → sass}/button/stories/button/tertiary.stories.js +4 -4
  213. package/src/{less → sass}/button/stories/button/text-spacing.stories.js +1 -1
  214. package/src/{less → sass}/button/stories/destructive-button/primary.stories.js +3 -3
  215. package/src/{less → sass}/button/stories/destructive-button/secondary.stories.js +3 -3
  216. package/src/{less → sass}/button/stories/destructive-button/tertiary.stories.js +3 -3
  217. package/src/{less → sass}/button/stories/fake-button/base.stories.js +2 -2
  218. package/src/{less → sass}/button/stories/fake-button/cascade.stories.js +3 -3
  219. package/src/{less → sass}/button/stories/fake-button/dimensions.stories.js +1 -1
  220. package/src/{less → sass}/button/stories/fake-button/primary.stories.js +4 -4
  221. package/src/{less → sass}/button/stories/fake-button/secondary.stories.js +4 -4
  222. package/src/{less → sass}/button/stories/fake-button/text-spacing.stories.js +1 -1
  223. package/src/{less/calendar/calendar.less → sass/calendar/calendar.scss} +43 -18
  224. package/src/{less → sass}/calendar/stories/calendar.stories.js +6 -6
  225. package/src/{less/carousel/carousel.less → sass/carousel/carousel.scss} +66 -49
  226. package/src/{less → sass}/carousel/stories/carousel.stories.js +25 -25
  227. package/src/sass/chart-legend/chart-legend.scss +74 -0
  228. package/src/sass/chart-legend/stories/chart-legend.stories.js +65 -0
  229. package/src/{less/checkbox/checkbox.less → sass/checkbox/checkbox.scss} +25 -24
  230. package/src/{less/chip/chip.less → sass/chip/chip.scss} +1 -1
  231. package/src/{less → sass}/chip/stories/interactive-chip.stories.js +17 -17
  232. package/src/{less/chips-combobox/chips-combobox.less → sass/chips-combobox/chips-combobox.scss} +7 -7
  233. package/src/{less → sass}/chips-combobox/stories/chips-combobox.stories.js +38 -38
  234. package/src/{less → sass}/chips-combobox/stories/rtl-chips-combobox.stories.js +34 -34
  235. package/src/{less/combobox/combobox.less → sass/combobox/combobox.scss} +76 -35
  236. package/src/{less → sass}/combobox/stories/combobox.stories.js +11 -11
  237. package/src/{less/confirm-dialog/confirm-dialog.less → sass/confirm-dialog/confirm-dialog.scss} +14 -12
  238. package/src/sass/cta-button/cta-button.scss +105 -0
  239. package/src/{less → sass}/cta-button/stories/cascade.stories.js +3 -3
  240. package/src/{less → sass}/cta-button/stories/cta-button.stories.js +2 -2
  241. package/src/{less → sass}/cta-button/stories/dimensions.stories.js +2 -2
  242. package/src/{less/date-textbox/date-textbox.less → sass/date-textbox/date-textbox.scss} +10 -6
  243. package/src/{less → sass}/date-textbox/stories/date-textbox.stories.js +23 -7
  244. package/src/{less/details/details.less → sass/details/details.scss} +9 -5
  245. package/src/{less → sass}/details/stories/cascade.stories.js +3 -3
  246. package/src/{less → sass}/details/stories/details.stories.js +5 -5
  247. package/src/sass/donut-chart/donut-chart.scss +98 -0
  248. package/src/sass/donut-chart/stories/donut-chart.stories.js +39 -0
  249. package/src/{less/drawer-dialog/drawer-dialog.less → sass/drawer-dialog/drawer-dialog.scss} +24 -21
  250. package/src/{less → sass}/drawer-dialog/stories/drawer-dialog.stories.js +7 -7
  251. package/src/{less/education-notice/education-notice.less → sass/education-notice/education-notice.scss} +26 -8
  252. package/src/{less → sass}/education-notice/stories/base.stories.js +13 -13
  253. package/src/{less/eek/eek.less → sass/eek/eek.scss} +43 -42
  254. package/src/{less/field/field.less → sass/field/field.scss} +23 -13
  255. package/src/{less → sass}/field/stories/stacked.stories.js +8 -8
  256. package/src/{less → sass}/field/stories/unstacked.stories.js +4 -4
  257. package/src/sass/filter-button/filter-button.scss +112 -0
  258. package/src/{less/filter-menu/filter-menu.less → sass/filter-menu/filter-menu.scss} +22 -10
  259. package/src/{less → sass}/filter-menu/stories/filter-menu.stories.js +24 -24
  260. package/src/{less/filter-menu-button/filter-menu-button.less → sass/filter-menu-button/filter-menu-button.scss} +103 -36
  261. package/src/{less → sass}/filter-menu-button/stories/filter-menu-button.stories.js +124 -124
  262. package/src/{less/floating-label/floating-label.less → sass/floating-label/floating-label.scss} +31 -15
  263. package/src/{less → sass}/floating-label/stories/floating-label.stories.js +15 -15
  264. package/src/{less/fullscreen-dialog/fullscreen-dialog.less → sass/fullscreen-dialog/fullscreen-dialog.scss} +15 -11
  265. package/src/{less → sass}/fullscreen-dialog/stories/fullscreen-dialog.stories.js +4 -4
  266. package/src/sass/gh/_gh-mixins.scss +197 -0
  267. package/src/sass/global/global.scss +50 -0
  268. package/src/{less → sass}/global/stories/global.stories.js +12 -12
  269. package/src/sass/icon/icon.scss +83 -0
  270. package/src/{less → sass}/icon/stories/icon.stories.js +5 -5
  271. package/src/{less/icon-button/icon-button.less → sass/icon-button/icon-button.scss} +88 -35
  272. package/src/sass/icon-button/stories/alignment.stories.js +28 -0
  273. package/src/{less → sass}/icon-button/stories/buttons.stories.js +36 -36
  274. package/src/{less → sass}/icon-button/stories/links.stories.js +36 -36
  275. package/src/sass/image-placeholder/image-placeholder.scss +10 -0
  276. package/src/sass/infotip/infotip.scss +136 -0
  277. package/src/{less → sass}/infotip/stories/infotip.stories.js +12 -12
  278. package/src/{less/inline-notice/inline-notice.less → sass/inline-notice/inline-notice.scss} +3 -3
  279. package/src/{less → sass}/inline-notice/stories/inline.stories.js +11 -11
  280. package/src/{less/lightbox-dialog/lightbox-dialog.less → sass/lightbox-dialog/lightbox-dialog.scss} +61 -19
  281. package/src/{less → sass}/lightbox-dialog/stories/lightbox-dialog.stories.js +40 -33
  282. package/src/sass/link/link.scss +61 -0
  283. package/src/{less/listbox/listbox.less → sass/listbox/listbox.scss} +20 -14
  284. package/src/{less → sass}/listbox/stories/cascade.stories.js +9 -9
  285. package/src/{less → sass}/listbox/stories/listbox.stories.js +18 -18
  286. package/src/sass/listbox-button/listbox-button.scss +233 -0
  287. package/src/{less → sass}/listbox-button/stories/base.stories.js +48 -48
  288. package/src/{less → sass}/listbox-button/stories/cascade.stories.js +15 -15
  289. package/src/{less → sass}/listbox-button/stories/dimensions.stories.js +5 -5
  290. package/src/{less → sass}/listbox-button/stories/error/error.base.stories.js +38 -38
  291. package/src/{less → sass}/listbox-button/stories/error/error.cascade.stories.js +15 -15
  292. package/src/{less → sass}/listbox-button/stories/error/error.dimensions.stories.js +5 -5
  293. package/src/{less → sass}/listbox-button/stories/error/error.form.stories.js +10 -10
  294. package/src/{less → sass}/listbox-button/stories/form.stories.js +15 -15
  295. package/src/{less → sass}/listbox-button/stories/subtitle.stories.js +38 -38
  296. package/src/sass/marketsans/marketsans.scss +46 -0
  297. package/src/{less/menu/menu.less → sass/menu/menu.scss} +22 -12
  298. package/src/{less → sass}/menu/stories/fake-menu.stories.js +4 -4
  299. package/src/{less → sass}/menu/stories/multiSelect.stories.js +9 -9
  300. package/src/{less/menu-button/menu-button.less → sass/menu-button/menu-button.scss} +60 -30
  301. package/src/{less → sass}/menu-button/stories/base.stories.js +30 -30
  302. package/src/{less → sass}/menu-button/stories/cascade.stories.js +6 -6
  303. package/src/{less → sass}/menu-button/stories/dimensions.stories.js +1 -1
  304. package/src/{less → sass}/menu-button/stories/fake-menu-button.stories.js +6 -6
  305. package/src/sass/mixins/private/_bubble-mixins.scss +168 -0
  306. package/src/sass/mixins/private/_button-mixins.scss +95 -0
  307. package/src/{less/mixins/private/dialog-mixins.less → sass/mixins/private/_dialog-mixins.scss} +25 -22
  308. package/src/sass/mixins/private/_dropdown-mixins.scss +60 -0
  309. package/src/{less/mixins/private/filter-button-mixins.less → sass/mixins/private/_filter-button-mixins.scss} +6 -2
  310. package/src/sass/mixins/private/_filter-menu-mixins.scss +45 -0
  311. package/src/sass/mixins/private/_generated-icon-mixins.scss +517 -0
  312. package/src/sass/mixins/private/_icon-mixins.scss +12 -0
  313. package/src/sass/mixins/private/_listbox-mixins.scss +48 -0
  314. package/src/sass/mixins/private/_menu-mixins.scss +30 -0
  315. package/src/{less/mixins/private/selection-list-mixins.less → sass/mixins/private/_selection-list-mixins.scss} +3 -3
  316. package/src/sass/mixins/private/_token-mixins.scss +124 -0
  317. package/src/sass/mixins/public/_typography-mixins.scss +136 -0
  318. package/src/sass/mixins/public/_utility-mixins.scss +62 -0
  319. package/src/{less/page-grid/page-grid.less → sass/page-grid/page-grid.scss} +22 -22
  320. package/src/{less/page-notice/page-notice.less → sass/page-notice/page-notice.scss} +66 -26
  321. package/src/{less → sass}/page-notice/stories/page-notice.stories.js +14 -14
  322. package/src/{less → sass}/page-notice/stories/test.stories.js +7 -7
  323. package/src/{less/pagination/pagination.less → sass/pagination/pagination.scss} +28 -14
  324. package/src/{less → sass}/pagination/stories/button-cascade.stories.js +6 -6
  325. package/src/{less → sass}/pagination/stories/buttons.stories.js +4 -4
  326. package/src/{less → sass}/pagination/stories/link-cascade.stories.js +6 -6
  327. package/src/{less → sass}/pagination/stories/links.stories.js +4 -4
  328. package/src/{less → sass}/pagination/stories/overflow.stories.js +20 -20
  329. package/src/{less/panel-dialog/panel-dialog.less → sass/panel-dialog/panel-dialog.scss} +19 -16
  330. package/src/{less → sass}/panel-dialog/stories/panel-dialog.stories.js +7 -7
  331. package/src/{less/phone-input/phone-input.less → sass/phone-input/phone-input.scss} +47 -56
  332. package/src/{less → sass}/phone-input/stories/phone-input.stories.js +56 -56
  333. package/src/sass/progress-bar/progress-bar.scss +51 -0
  334. package/src/{less/progress-bar-expressive/progress-bar-expressive.less → sass/progress-bar-expressive/progress-bar-expressive.scss} +19 -20
  335. package/src/{less/progress-spinner/progress-spinner.less → sass/progress-spinner/progress-spinner.scss} +3 -3
  336. package/src/{less → sass}/progress-spinner/stories/progress-spinner.stories.js +4 -4
  337. package/src/{less/progress-stepper/progress-stepper.less → sass/progress-stepper/progress-stepper.scss} +55 -30
  338. package/src/{less/radio/radio.less → sass/radio/radio.scss} +25 -24
  339. package/src/{less/section-notice/section-notice.less → sass/section-notice/section-notice.scss} +42 -18
  340. package/src/{less → sass}/section-notice/stories/icon-16.stories.js +14 -14
  341. package/src/{less → sass}/section-notice/stories/iconless.stories.js +4 -4
  342. package/src/{less → sass}/section-notice/stories/test.stories.js +4 -4
  343. package/src/{less/section-title/section-title.less → sass/section-title/section-title.scss} +15 -11
  344. package/src/{less → sass}/section-title/stories/rtl.stories.js +3 -3
  345. package/src/{less → sass}/section-title/stories/section-title.stories.js +4 -4
  346. package/src/{less/segmented-buttons/segmented-buttons.less → sass/segmented-buttons/segmented-buttons.scss} +8 -8
  347. package/src/{less → sass}/segmented-buttons/stories/segmented-buttons.stories.js +2 -2
  348. package/src/{less/select/select.less → sass/select/select.scss} +52 -17
  349. package/src/{less → sass}/select/stories/cascade.stories.js +3 -3
  350. package/src/{less → sass}/select/stories/default.stories.js +9 -9
  351. package/src/{less → sass}/select/stories/floating-label.stories.js +4 -4
  352. package/src/{less/signal/signal.less → sass/signal/signal.scss} +9 -6
  353. package/src/{less/skeleton/skeleton.less → sass/skeleton/skeleton.scss} +23 -20
  354. package/src/{less/snackbar-dialog/snackbar-dialog.less → sass/snackbar-dialog/snackbar-dialog.scss} +30 -11
  355. package/src/{less/split-button/split-button.less → sass/split-button/split-button.scss} +1 -1
  356. package/src/{less → sass}/split-button/stories/base.stories.js +13 -13
  357. package/src/{less → sass}/split-button/stories/rtl.stories.js +6 -6
  358. package/src/{less → sass}/split-button/stories/size.stories.js +2 -2
  359. package/src/{less/star-rating/star-rating.less → sass/star-rating/star-rating.scss} +14 -14
  360. package/src/{less/star-rating-select/star-rating-select.less → sass/star-rating-select/star-rating-select.scss} +16 -15
  361. package/src/{less/switch/switch.less → sass/switch/switch.scss} +48 -20
  362. package/src/{less/tabs/tabs.less → sass/tabs/tabs.scss} +17 -7
  363. package/src/{less → sass}/textbox/stories/icon.stories.js +32 -18
  364. package/src/{less → sass}/textbox/stories/rtl/icon.stories.js +27 -11
  365. package/src/sass/textbox/stories/rtl/textbox.stories.js +45 -0
  366. package/src/{less → sass}/textbox/stories/textbox.stories.js +24 -2
  367. package/src/sass/textbox/textbox.scss +238 -0
  368. package/src/{less/toast-dialog/toast-dialog.less → sass/toast-dialog/toast-dialog.scss} +67 -23
  369. package/src/{less → sass}/toggle-button/stories/gallery-layout.stories.js +3 -3
  370. package/src/{less → sass}/toggle-button/stories/list-layout.stories.js +3 -3
  371. package/src/{less/toggle-button/toggle-button.less → sass/toggle-button/toggle-button.scss} +6 -1
  372. package/src/sass/toggle-button-group/stories/gallery-layout-exceptions.stories.js +471 -0
  373. package/src/sass/toggle-button-group/stories/gallery-layout.stories.js +564 -0
  374. package/src/sass/toggle-button-group/stories/list-layout-exceptions.stories.js +507 -0
  375. package/src/sass/toggle-button-group/stories/list-layout.stories.js +505 -0
  376. package/src/sass/toggle-button-group/stories/minimal-layout-exceptions.stories.js +291 -0
  377. package/src/sass/toggle-button-group/stories/minimal-layout.stories.js +289 -0
  378. package/src/sass/toggle-button-group/toggle-button-group.scss +342 -0
  379. package/src/{less → sass}/tooltip/stories/pointer.stories.js +12 -12
  380. package/src/{less → sass}/tooltip/stories/tooltip.stories.js +3 -3
  381. package/src/sass/tooltip/tooltip.scss +118 -0
  382. package/src/{less → sass}/tourtip/stories/tourtip.stories.js +5 -5
  383. package/src/{less/tourtip/tourtip.less → sass/tourtip/tourtip.scss} +41 -33
  384. package/src/{less/typography/typography.less → sass/typography/typography.scss} +24 -21
  385. package/src/{less/utility/utility.less → sass/utility/utility.scss} +13 -13
  386. package/src/sass/variables/_variables.scss +64 -0
  387. package/src/{less/video/video.less → sass/video/video.scss} +3 -3
  388. package/src/svg/icons.svg +21 -21
  389. package/src/tokens/evo-core.css +139 -67
  390. package/src/tokens/evo-dark.css +57 -62
  391. package/src/tokens/evo-light.css +76 -76
  392. package/svg.svg +21 -21
  393. package/.changeset/big-wombats-greet.md +0 -5
  394. package/.changeset/khaki-fans-pretend.md +0 -5
  395. package/.changeset/lemon-bobcats-collect.md +0 -5
  396. package/.changeset/loud-rivers-pump.md +0 -5
  397. package/_cdn/skin/v17.5.0-next.0/skin-default.min.css +0 -76
  398. package/_cdn/skin/v17.5.0-next.0/skin-full.min.css +0 -160
  399. package/_cdn/skin/v17.5.0-next.0/skin-headless.min.css +0 -6
  400. package/dist/variables/variables.less +0 -70
  401. package/less[ds-4].less +0 -3
  402. package/src/less/avatar/avatar.less +0 -134
  403. package/src/less/badge/badge.less +0 -16
  404. package/src/less/bundles/skin-default.less +0 -3
  405. package/src/less/bundles/skin-full.less +0 -4
  406. package/src/less/bundles/skin-headless.less +0 -70
  407. package/src/less/cta-button/cta-button.less +0 -79
  408. package/src/less/filter-button/filter-button.less +0 -80
  409. package/src/less/global/global.less +0 -37
  410. package/src/less/icon/generated/icon.less +0 -2905
  411. package/src/less/icon/icon.less +0 -62
  412. package/src/less/icon-button/stories/alignment.stories.js +0 -28
  413. package/src/less/image-placeholder/image-placeholder.less +0 -9
  414. package/src/less/infotip/infotip.less +0 -126
  415. package/src/less/link/link.less +0 -44
  416. package/src/less/listbox-button/listbox-button.less +0 -184
  417. package/src/less/marketsans/marketsans.less +0 -45
  418. package/src/less/mixins/private/bubble-mixins.less +0 -166
  419. package/src/less/mixins/private/button-mixins.less +0 -95
  420. package/src/less/mixins/private/dropdown-mixins.less +0 -44
  421. package/src/less/mixins/private/filter-menu-mixins.less +0 -31
  422. package/src/less/mixins/private/generated-icon-mixins.less +0 -517
  423. package/src/less/mixins/private/icon-mixins.less +0 -17
  424. package/src/less/mixins/private/listbox-mixins.less +0 -35
  425. package/src/less/mixins/private/menu-mixins.less +0 -21
  426. package/src/less/mixins/private/token-mixins.less +0 -100
  427. package/src/less/progress-bar/progress-bar.less +0 -35
  428. package/src/less/textbox/stories/rtl/textbox.stories.js +0 -17
  429. package/src/less/textbox/textbox.less +0 -181
  430. package/src/less/toggle-button-group/stories/gallery-layout.stories.js +0 -657
  431. package/src/less/toggle-button-group/stories/list-layout.stories.js +0 -611
  432. package/src/less/toggle-button-group/stories/minimal-layout.stories.js +0 -341
  433. package/src/less/toggle-button-group/toggle-button-group.less +0 -111
  434. package/src/less/tooltip/tooltip.less +0 -109
  435. package/src/less/variables/variables.less +0 -70
  436. /package/src/{less → sass}/alert-dialog/stories/alert-dialog.stories.js +0 -0
  437. /package/src/{less → sass}/avatar/stories/avatar.stories.js +0 -0
  438. /package/src/{less → sass}/badge/stories/badge.stories.js +0 -0
  439. /package/src/{less → sass}/button/stories/destructive-button/borderless.stories.js +0 -0
  440. /package/src/{less → sass}/checkbox/stories/checked.stories.js +0 -0
  441. /package/src/{less → sass}/checkbox/stories/mixed.stories.js +0 -0
  442. /package/src/{less → sass}/checkbox/stories/unchecked.stories.js +0 -0
  443. /package/src/{less → sass}/chip/stories/static-chip.stories.js +0 -0
  444. /package/src/{less → sass}/confirm-dialog/stories/confirm-dialog.stories.js +0 -0
  445. /package/src/{less → sass}/field/stories/helper-texts-stacked.stories.js +0 -0
  446. /package/src/{less → sass}/filter-button/stories/button.stories.js +0 -0
  447. /package/src/{less → sass}/filter-button/stories/group.stories.js +0 -0
  448. /package/src/{less → sass}/filter-button/stories/link.stories.js +0 -0
  449. /package/src/{less/flag/flag.less → sass/flag/flag.scss} +0 -0
  450. /package/src/{less → sass}/flag/stories/flag.stories.js +0 -0
  451. /package/src/{less → sass}/gh/gh-mixins.less +0 -0
  452. /package/src/{less → sass}/image-placeholder/stories/image-placeholder.stories.js +0 -0
  453. /package/src/{less → sass}/link/stories/link.stories.js +0 -0
  454. /package/src/{less → sass}/menu/stories/misc.stories.js +0 -0
  455. /package/src/{less → sass}/mixins/public/typography-mixins.less +0 -0
  456. /package/src/{less → sass}/mixins/public/utility-mixins.less +0 -0
  457. /package/src/{less → sass}/progress-bar/stories/progress-bar.stories.js +0 -0
  458. /package/src/{less → sass}/progress-bar-expressive/stories/progress-bar-expressive.stories.js +0 -0
  459. /package/src/{less → sass}/progress-stepper/stories/progress-stepper.stories.js +0 -0
  460. /package/src/{less → sass}/radio/stories/checked.stories.js +0 -0
  461. /package/src/{less → sass}/radio/stories/unchecked.stories.js +0 -0
  462. /package/src/{less → sass}/signal/stories/signal.stories.js +0 -0
  463. /package/src/{less → sass}/skeleton/stories/base.stories.js +0 -0
  464. /package/src/{less → sass}/skeleton/stories/composite.stories.js +0 -0
  465. /package/src/{less → sass}/skeleton/stories/rtl.stories.js +0 -0
  466. /package/src/{less → sass}/snackbar-dialog/stories/base.stories.js +0 -0
  467. /package/src/{less → sass}/snackbar-dialog/stories/font-size.stories.js +0 -0
  468. /package/src/{less → sass}/snackbar-dialog/stories/rtl.stories.js +0 -0
  469. /package/src/{less → sass}/star-rating/stories/star-rating.stories.js +0 -0
  470. /package/src/{less → sass}/star-rating-select/stories/star-rating-select.stories.js +0 -0
  471. /package/src/{less → sass}/switch/stories/form.stories.js +0 -0
  472. /package/src/{less → sass}/switch/stories/script.stories.js +0 -0
  473. /package/src/{less → sass}/tabs/stories/fake-tabs/block.stories.js +0 -0
  474. /package/src/{less → sass}/tabs/stories/fake-tabs/inlineBlock.stories.js +0 -0
  475. /package/src/{less → sass}/tabs/stories/tabs/block.stories.js +0 -0
  476. /package/src/{less → sass}/tabs/stories/tabs/inlineBlock.stories.js +0 -0
  477. /package/src/{less → sass}/toast-dialog/stories/toast-dialog.stories.js +0 -0
  478. /package/src/{less → sass}/toggle-button/stories/gallery-layout-responsive.stories.js +0 -0
  479. /package/src/{less → sass}/toggle-button/stories/minimal-layout.stories.js +0 -0
package/src/{less → sass}/phone-input/stories/phone-input.stories.js RENAMED
@@ -11,7 +11,7 @@ export const Default = () => `
11
11
  aria-label="Country: United States of America (+1)">
12
12
  </span>
13
13
  </span>
14
- <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
14
+ <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
15
15
  <use href="#icon-chevron-down-12"></use>
16
16
  </svg>
17
17
  </span>
@@ -25,7 +25,7 @@ export const Default = () => `
25
25
  <span>Albania</span>
26
26
  <span>(+355)</span>
27
27
  </span>
28
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
28
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
29
29
  <use href="#icon-tick-16"></use>
30
30
  </svg>
31
31
  </div>
@@ -36,7 +36,7 @@ export const Default = () => `
36
36
  <span>India</span>
37
37
  <span>(+91)</span>
38
38
  </span>
39
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
39
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
40
40
  <use href="#icon-tick-16"></use>
41
41
  </svg>
42
42
  </div>
@@ -47,7 +47,7 @@ export const Default = () => `
47
47
  <span>Saint Helena, Ascension and Tristan da Cunha</span>
48
48
  <span>(+290)</span>
49
49
  </span>
50
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
50
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
51
51
  <use href="#icon-tick-16"></use>
52
52
  </svg>
53
53
  </div>
@@ -58,7 +58,7 @@ export const Default = () => `
58
58
  <span>United Kingdom</span>
59
59
  <span>(+44)</span>
60
60
  </span>
61
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
61
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
62
62
  <use href="#icon-tick-16"></use>
63
63
  </svg>
64
64
  </div>
@@ -69,7 +69,7 @@ export const Default = () => `
69
69
  <span>United States of America</span>
70
70
  <span>(+1)</span>
71
71
  </span>
72
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
72
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
73
73
  <use href="#icon-tick-16"></use>
74
74
  </svg>
75
75
  </div>
@@ -94,7 +94,7 @@ export const Large = () => `
94
94
  aria-label="Country: United States of America (+1)">
95
95
  </span>
96
96
  </span>
97
- <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
97
+ <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
98
98
  <use href="#icon-chevron-down-12"></use>
99
99
  </svg>
100
100
  </span>
@@ -108,7 +108,7 @@ export const Large = () => `
108
108
  <span>Albania</span>
109
109
  <span>(+355)</span>
110
110
  </span>
111
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
111
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
112
112
  <use href="#icon-tick-16"></use>
113
113
  </svg>
114
114
  </div>
@@ -119,7 +119,7 @@ export const Large = () => `
119
119
  <span>India</span>
120
120
  <span>(+91)</span>
121
121
  </span>
122
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
122
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
123
123
  <use href="#icon-tick-16"></use>
124
124
  </svg>
125
125
  </div>
@@ -130,7 +130,7 @@ export const Large = () => `
130
130
  <span>Saint Helena, Ascension and Tristan da Cunha</span>
131
131
  <span>(+290)</span>
132
132
  </span>
133
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
133
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
134
134
  <use href="#icon-tick-16"></use>
135
135
  </svg>
136
136
  </div>
@@ -141,7 +141,7 @@ export const Large = () => `
141
141
  <span>United Kingdom</span>
142
142
  <span>(+44)</span>
143
143
  </span>
144
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
144
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
145
145
  <use href="#icon-tick-16"></use>
146
146
  </svg>
147
147
  </div>
@@ -152,16 +152,16 @@ export const Large = () => `
152
152
  <span>United States of America</span>
153
153
  <span>(+1)</span>
154
154
  </span>
155
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
155
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
156
156
  <use href="#icon-tick-16"></use>
157
157
  </svg>
158
158
  </div>
159
159
  </div>
160
160
  </div>
161
161
  </span>
162
- <span class="textbox">
162
+ <span class="textbox textbox--large">
163
163
  <span aria-hidden="true">+1</span>
164
- <input class="textbox__control textbox__control--large" type="tel" aria-label="area code + phone number"
164
+ <input class="textbox__control" type="tel" aria-label="area code + phone number"
165
165
  autocomplete="tel-national" />
166
166
  </span>
167
167
  </span>`;
@@ -177,7 +177,7 @@ export const ReadOnly = () => `
177
177
  aria-label="Country: United States of America (+1)">
178
178
  </span>
179
179
  </span>
180
- <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
180
+ <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
181
181
  <use href="#icon-chevron-down-12"></use>
182
182
  </svg>
183
183
  </span>
@@ -191,7 +191,7 @@ export const ReadOnly = () => `
191
191
  <span>Albania</span>
192
192
  <span>(+355)</span>
193
193
  </span>
194
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
194
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
195
195
  <use href="#icon-tick-16"></use>
196
196
  </svg>
197
197
  </div>
@@ -202,7 +202,7 @@ export const ReadOnly = () => `
202
202
  <span>India</span>
203
203
  <span>(+91)</span>
204
204
  </span>
205
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
205
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
206
206
  <use href="#icon-tick-16"></use>
207
207
  </svg>
208
208
  </div>
@@ -213,7 +213,7 @@ export const ReadOnly = () => `
213
213
  <span>Saint Helena, Ascension and Tristan da Cunha</span>
214
214
  <span>(+290)</span>
215
215
  </span>
216
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
216
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
217
217
  <use href="#icon-tick-16"></use>
218
218
  </svg>
219
219
  </div>
@@ -224,7 +224,7 @@ export const ReadOnly = () => `
224
224
  <span>United Kingdom</span>
225
225
  <span>(+44)</span>
226
226
  </span>
227
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
227
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
228
228
  <use href="#icon-tick-16"></use>
229
229
  </svg>
230
230
  </div>
@@ -235,7 +235,7 @@ export const ReadOnly = () => `
235
235
  <span>United States of America</span>
236
236
  <span>(+1)</span>
237
237
  </span>
238
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
238
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
239
239
  <use href="#icon-tick-16"></use>
240
240
  </svg>
241
241
  </div>
@@ -260,7 +260,7 @@ export const Disabled = () => `
260
260
  data-country-code="1" aria-label="Country: United States of America (+1)">
261
261
  </span>
262
262
  </span>
263
- <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
263
+ <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
264
264
  <use href="#icon-chevron-down-12"></use>
265
265
  </svg>
266
266
  </span>
@@ -274,7 +274,7 @@ export const Disabled = () => `
274
274
  <span>Albania</span>
275
275
  <span>(+355)</span>
276
276
  </span>
277
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
277
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
278
278
  <use href="#icon-tick-16"></use>
279
279
  </svg>
280
280
  </div>
@@ -285,7 +285,7 @@ export const Disabled = () => `
285
285
  <span>India</span>
286
286
  <span>(+91)</span>
287
287
  </span>
288
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
288
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
289
289
  <use href="#icon-tick-16"></use>
290
290
  </svg>
291
291
  </div>
@@ -296,7 +296,7 @@ export const Disabled = () => `
296
296
  <span>Saint Helena, Ascension and Tristan da Cunha</span>
297
297
  <span>(+290)</span>
298
298
  </span>
299
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
299
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
300
300
  <use href="#icon-tick-16"></use>
301
301
  </svg>
302
302
  </div>
@@ -307,7 +307,7 @@ export const Disabled = () => `
307
307
  <span>United Kingdom</span>
308
308
  <span>(+44)</span>
309
309
  </span>
310
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
310
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
311
311
  <use href="#icon-tick-16"></use>
312
312
  </svg>
313
313
  </div>
@@ -318,7 +318,7 @@ export const Disabled = () => `
318
318
  <span>United States of America</span>
319
319
  <span>(+1)</span>
320
320
  </span>
321
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
321
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
322
322
  <use href="#icon-tick-16"></use>
323
323
  </svg>
324
324
  </div>
@@ -343,7 +343,7 @@ export const Error = () => `
343
343
  aria-label="Country: United States of America (+1)">
344
344
  </span>
345
345
  </span>
346
- <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
346
+ <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
347
347
  <use href="#icon-chevron-down-12"></use>
348
348
  </svg>
349
349
  </span>
@@ -357,7 +357,7 @@ export const Error = () => `
357
357
  <span>Albania</span>
358
358
  <span>(+355)</span>
359
359
  </span>
360
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
360
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
361
361
  <use href="#icon-tick-16"></use>
362
362
  </svg>
363
363
  </div>
@@ -368,7 +368,7 @@ export const Error = () => `
368
368
  <span>India</span>
369
369
  <span>(+91)</span>
370
370
  </span>
371
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
371
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
372
372
  <use href="#icon-tick-16"></use>
373
373
  </svg>
374
374
  </div>
@@ -379,7 +379,7 @@ export const Error = () => `
379
379
  <span>Saint Helena, Ascension and Tristan da Cunha</span>
380
380
  <span>(+290)</span>
381
381
  </span>
382
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
382
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
383
383
  <use href="#icon-tick-16"></use>
384
384
  </svg>
385
385
  </div>
@@ -390,7 +390,7 @@ export const Error = () => `
390
390
  <span>United Kingdom</span>
391
391
  <span>(+44)</span>
392
392
  </span>
393
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
393
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
394
394
  <use href="#icon-tick-16"></use>
395
395
  </svg>
396
396
  </div>
@@ -401,7 +401,7 @@ export const Error = () => `
401
401
  <span>United States of America</span>
402
402
  <span>(+1)</span>
403
403
  </span>
404
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
404
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
405
405
  <use href="#icon-tick-16"></use>
406
406
  </svg>
407
407
  </div>
@@ -426,7 +426,7 @@ export const Fluid = () => `
426
426
  aria-label="Country: United States of America (+1)">
427
427
  </span>
428
428
  </span>
429
- <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
429
+ <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
430
430
  <use href="#icon-chevron-down-12"></use>
431
431
  </svg>
432
432
  </span>
@@ -440,7 +440,7 @@ export const Fluid = () => `
440
440
  <span>Albania</span>
441
441
  <span>(+355)</span>
442
442
  </span>
443
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
443
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
444
444
  <use href="#icon-tick-16"></use>
445
445
  </svg>
446
446
  </div>
@@ -451,7 +451,7 @@ export const Fluid = () => `
451
451
  <span>India</span>
452
452
  <span>(+91)</span>
453
453
  </span>
454
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
454
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
455
455
  <use href="#icon-tick-16"></use>
456
456
  </svg>
457
457
  </div>
@@ -462,7 +462,7 @@ export const Fluid = () => `
462
462
  <span>Saint Helena, Ascension and Tristan da Cunha</span>
463
463
  <span>(+290)</span>
464
464
  </span>
465
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
465
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
466
466
  <use href="#icon-tick-16"></use>
467
467
  </svg>
468
468
  </div>
@@ -473,7 +473,7 @@ export const Fluid = () => `
473
473
  <span>United Kingdom</span>
474
474
  <span>(+44)</span>
475
475
  </span>
476
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
476
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
477
477
  <use href="#icon-tick-16"></use>
478
478
  </svg>
479
479
  </div>
@@ -484,7 +484,7 @@ export const Fluid = () => `
484
484
  <span>United States of America</span>
485
485
  <span>(+1)</span>
486
486
  </span>
487
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
487
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
488
488
  <use href="#icon-tick-16"></use>
489
489
  </svg>
490
490
  </div>
@@ -510,7 +510,7 @@ export const RTL = () => `
510
510
  aria-label="Country: United States of America (+1)">
511
511
  </span>
512
512
  </span>
513
- <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
513
+ <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
514
514
  <use href="#icon-chevron-down-12"></use>
515
515
  </svg>
516
516
  </span>
@@ -524,7 +524,7 @@ export const RTL = () => `
524
524
  <span>Albania</span>
525
525
  <span>(+355)</span>
526
526
  </span>
527
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
527
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
528
528
  <use href="#icon-tick-16"></use>
529
529
  </svg>
530
530
  </div>
@@ -535,7 +535,7 @@ export const RTL = () => `
535
535
  <span>India</span>
536
536
  <span>(+91)</span>
537
537
  </span>
538
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
538
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
539
539
  <use href="#icon-tick-16"></use>
540
540
  </svg>
541
541
  </div>
@@ -546,7 +546,7 @@ export const RTL = () => `
546
546
  <span>Saint Helena, Ascension and Tristan da Cunha</span>
547
547
  <span>(+290)</span>
548
548
  </span>
549
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
549
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
550
550
  <use href="#icon-tick-16"></use>
551
551
  </svg>
552
552
  </div>
@@ -557,7 +557,7 @@ export const RTL = () => `
557
557
  <span>United Kingdom</span>
558
558
  <span>(+44)</span>
559
559
  </span>
560
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
560
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
561
561
  <use href="#icon-tick-16"></use>
562
562
  </svg>
563
563
  </div>
@@ -568,7 +568,7 @@ export const RTL = () => `
568
568
  <span>United States of America</span>
569
569
  <span>(+1)</span>
570
570
  </span>
571
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
571
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
572
572
  <use href="#icon-tick-16"></use>
573
573
  </svg>
574
574
  </div>
@@ -597,7 +597,7 @@ export const TextSpacing = () => `
597
597
  data-country-code="1">
598
598
  </span>
599
599
  </span>
600
- <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
600
+ <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
601
601
  <use href="#icon-chevron-down-12"></use>
602
602
  </svg>
603
603
  </span>
@@ -612,7 +612,7 @@ export const TextSpacing = () => `
612
612
  <span>Albania</span>
613
613
  <span>(+355)</span>
614
614
  </span>
615
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
615
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
616
616
  <use href="#icon-tick-16"></use>
617
617
  </svg>
618
618
  </div>
@@ -624,7 +624,7 @@ export const TextSpacing = () => `
624
624
  <span>India</span>
625
625
  <span>(+91)</span>
626
626
  </span>
627
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
627
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
628
628
  <use href="#icon-tick-16"></use>
629
629
  </svg>
630
630
  </div>
@@ -636,7 +636,7 @@ export const TextSpacing = () => `
636
636
  <span>Saint Helena, Ascension and Tristan da Cunha</span>
637
637
  <span>(+290)</span>
638
638
  </span>
639
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
639
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
640
640
  <use href="#icon-tick-16"></use>
641
641
  </svg>
642
642
  </div>
@@ -648,7 +648,7 @@ export const TextSpacing = () => `
648
648
  <span>United Kingdom</span>
649
649
  <span>(+44)</span>
650
650
  </span>
651
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
651
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
652
652
  <use href="#icon-tick-16"></use>
653
653
  </svg>
654
654
  </div>
@@ -660,7 +660,7 @@ export const TextSpacing = () => `
660
660
  <span>United States of America</span>
661
661
  <span>(+1)</span>
662
662
  </span>
663
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
663
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
664
664
  <use href="#icon-tick-16"></use>
665
665
  </svg>
666
666
  </div>
@@ -690,7 +690,7 @@ export const overrideFontSize = () => `
690
690
  data-country-code="1">
691
691
  </span>
692
692
  </span>
693
- <svg class="icon icon--chevron-down-12" focusable="false" height="10" width="14" aria-hidden="true">
693
+ <svg class="icon icon--12" focusable="false" height="10" width="14" aria-hidden="true">
694
694
  <use href="#icon-chevron-down-12"></use>
695
695
  </svg>
696
696
  </span>
@@ -705,7 +705,7 @@ export const overrideFontSize = () => `
705
705
  <span>Albania</span>
706
706
  <span>(+355)</span>
707
707
  </span>
708
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
708
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
709
709
  <use href="#icon-tick-16"></use>
710
710
  </svg>
711
711
  </div>
@@ -717,7 +717,7 @@ export const overrideFontSize = () => `
717
717
  <span>India</span>
718
718
  <span>(+91)</span>
719
719
  </span>
720
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
720
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
721
721
  <use href="#icon-tick-16"></use>
722
722
  </svg>
723
723
  </div>
@@ -729,7 +729,7 @@ export const overrideFontSize = () => `
729
729
  <span>Saint Helena, Ascension and Tristan da Cunha</span>
730
730
  <span>(+290)</span>
731
731
  </span>
732
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
732
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
733
733
  <use href="#icon-tick-16"></use>
734
734
  </svg>
735
735
  </div>
@@ -741,7 +741,7 @@ export const overrideFontSize = () => `
741
741
  <span>United Kingdom</span>
742
742
  <span>(+44)</span>
743
743
  </span>
744
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
744
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
745
745
  <use href="#icon-tick-16"></use>
746
746
  </svg>
747
747
  </div>
@@ -753,7 +753,7 @@ export const overrideFontSize = () => `
753
753
  <span>United States of America</span>
754
754
  <span>(+1)</span>
755
755
  </span>
756
- <svg class="icon icon--tick-16" focusable="false" height="10" width="14" aria-hidden="true">
756
+ <svg class="icon icon--16" focusable="false" height="10" width="14" aria-hidden="true">
757
757
  <use href="#icon-tick-16"></use>
758
758
  </svg>
759
759
  </div>
package/src/sass/progress-bar/progress-bar.scss ADDED
@@ -0,0 +1,51 @@
1
+ @import "../variables/variables";
2
+ @import "../mixins/private/token-mixins";
3
+
4
+ .progress-bar {
5
+ border: none;
6
+ @include color-token(
7
+ progress-bar-foreground-color,
8
+ color-foreground-accent
9
+ );
10
+
11
+ height: 4px;
12
+ margin: var(--spacing-100) 0;
13
+ }
14
+
15
+ .progress-bar::-webkit-progress-bar {
16
+ @include background-color-token(
17
+ progress-bar-background-color,
18
+ color-stroke-subtle
19
+ );
20
+
21
+ border-radius: 8px;
22
+ }
23
+
24
+ .progress-bar::-webkit-progress-value {
25
+ @include background-color-token(
26
+ progress-bar-foreground-color,
27
+ color-background-accent
28
+ );
29
+
30
+ border-radius: 8px;
31
+ transition: width 0.45s ease-in-out;
32
+ }
33
+
34
+ .progress-bar::-moz-progress-bar {
35
+ @include background-color-token(
36
+ progress-bar-foreground-color,
37
+ color-background-accent
38
+ );
39
+
40
+ border-radius: 8px;
41
+ }
42
+
43
+ .progress-bar--fluid {
44
+ width: 100%;
45
+ }
46
+
47
+ @media (min-width: $_screen-size-SM) {
48
+ .progress-bar {
49
+ margin: var(--spacing-200) 0;
50
+ }
51
+ }